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

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

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

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

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

3 51
html svg

3 ответа:

  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 означает, что:

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

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

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

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

87

установите ширину и высоту 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-это отдельная проблема.

3

к сожалению, я не знаю ответа, который относится к raw SVG, но в Рафаэле.js, я сделал это так:

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

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

надеюсь, что это помогает.

1