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

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

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

Я нацелен на 500x309px.

Какая комбинация width, height, viewBox и preserveAspectRatio может помочь мне достичь этого без 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, чтобы соответствовать границам.

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