Масштабировать SVG в контейнер без маски/обрезки

Ответ 1

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

• Чтобы заставить SVG заполнить элемент HTML, поместите в свой обертку атрибут CSS position:relative (или position:absolute или position:fixed), а затем

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

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

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

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

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

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

Ответ 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. Но манипуляция viewBox - отдельная проблема.

Ответ 3

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

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

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

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