Шкала SVG в контейнер без маски / кадрирования

Question

Я перепробовал много вариантов параметров svg, но не испытывал радости от масштабирования этого конкретного SVG.

Я пытаюсь поместить этот SVG в элемент контейнера, который контролирует размер SVG.

Я стремлюсь к 500x309px.

Какая комбинация width, height, viewBox и preserveAspectRatio может помочь мне достичь этого без маскировки или обрезки SVG?

Answer 1

1. У вас обязательно должен быть атрибут viewBox в вашем элементе SVG, который описывает ограничивающую рамку содержимого, которое вы хотите всегда видеть. (Файл, на который вы ссылаетесь, отсутствует; вы хотите добавить его.)

2. Чтобы SVG заполнял HTML-элемент, поместите атрибут CSS position:relative (или position:absolute или position:fixed, если необходимо) в свою оболочку, а затем

3. Установите атрибут CSS position:absolute на элементе <svg>, чтобы он находился внутри и заполнял ваш div. (При необходимости также примените left:0; top:0; width:100%; height:100%.)

Если у вас есть viewBox и ваш SVG настроен правильно, значение по умолчанию атрибута preserveAspectRatio будет делать то, что вы хотите. В частности, значение по умолчанию xMidYMid meet означает, что:

• Соотношение сторон, описанное вашим viewBox, будет сохранено при рендеринге. Для сравнения, значение none допускает неравномерное масштабирование.
• ViewBox всегда будет meet либо сверху / снизу, либо влево / вправо, а «почтовый ящик» сохранит другое измерение внутри.
  Для сравнения, значение slice гарантирует, что ваш viewBox полностью заполняет рендеринг, причем верх / низ или левый / правый выходят за пределы SVG.
• ViewBox будет сохраняться вертикально и горизонтально по центру в SVG viewport.
  Для сравнения, значение xMinYMax будет держать его в левом нижнем углу с отступом только вправо или вверх.

Вы можете увидеть это в прямом эфире здесь: http://jsfiddle.net/Jq3gy/2/

Попробуйте указать явные значения для preserveAspectRatio в элементе <svg> и нажмите «Обновить», чтобы увидеть, как они влияют на рендеринг.

Редактировать : я создал упрощенную версию US Map с viewBox (почти половину байтов) и использовал ее в обновленном демо, чтобы удовлетворить ваши конкретные потребности: http://jsfiddle.net/Jq3gy/5/

Answer 2

Установите ширину и высоту SVG равными размеру его контейнера и установите preserveAspectRatio = none.

<div height="50" width="100">
  <svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>

и

$("svg").each(function(){
  this.width = this.parentNode.width;
  this.height = this.parentNode.height;
}

Вот и все. Настройка CSS не нужна.

Я лично установил viewBox равным содержимому SVG. Поэтому в моем примере исходное изображение, которое я загружаю в SVG, имеет размер 300x200. Это уменьшится, чтобы соответствовать 50x100 div. Но манипулирование viewBox - это отдельная проблема.

Answer 3

К сожалению, я не знаю ответа, который относится к сырому SVG, но в Raphael.js я сделал это так:

var paper = Raphael('#container', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);

Этот метод масштабировал мой SVG, чтобы соответствовать границам.

Надеюсь, это поможет.