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

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

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

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

74
sgb 5 Мар 2012 в 16:39

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

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

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

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

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

124
Phrogz 5 Мар 2012 в 21:35

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

6
john ktejik 8 Ноя 2014 в 04:37

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

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

Эта техника масштабировала мой SVG в соответствии с ограничениями.

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

1
Valentin V 5 Мар 2012 в 13:21