Как равномерно масштабировать встроенный SVG с%

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

Если вы включаете SVG-дизайн как изображение, оно работает так же, как изображение:

<img class="img-svg" src="box.svg" />

Вы можете использовать CSS, чтобы легко пропорционально масштабировать его с помощью таких вещей:

.img-svg { width:100%; height: auto; }

НО

Если вы используете встроенный SVG, все меняется ...

<svg class="inline-svg" preserveAspectRatio="xMidYMid meet" viewBox="...">
    ...
</svg>

Это не сработает.

.inline-svg { display:block; width:100%; height: auto; }

Если вы сделаете это, он расширит окно SVG до 100%, но все элементы внутри него останутся одинакового размера. Вот jsfiddle: http://jsfiddle.net/s_d_p/jA62R/

Как правильно сделать это, чтобы содержимое внутри SVG равномерно увеличивалось /уменьшалось?

Примечание 1: я ищу решение CSS /SVG. Не взломать JavaScript.

Примечание 2: я нашел этот , но он основан на фиксированном px единиц.

7 голосов | спросил emersonthis 18 MarpmTue, 18 Mar 2014 21:55:15 +04002014-03-18T21:55:15+04:0009 2014, 21:55:15

2 ответа


0

Я до сих пор разбираюсь в этом, но вот лучшее, что я придумал до сих пор ...

CSS

.svg {
    display: block;
    width:100%;
    height: auto;
}

SVG

<svg preserveAspectRatio="xMidYMid meet" viewBox="...">
...
</svg>

CSS должен установить блокировку отображения, потому что для SVG по умолчанию используется inline (не знаю почему). Затем вы можете масштабировать его границу как div.

Чтобы заставить содержащиеся svg-узлы хорошо играть также , используйте preserveAspectRatio атрибут. Как указал Роберт в комментарии выше, атрибут preserveAspectRatio не будет работать, если у вас также нет атрибута viewBox.

Здесь стоит больше узнать о preserveAspectRatio , потому что здесь Есть много, если различные значения, которые будут определять, как масштабируемые элементы взаимодействуют с окружающим пространством, если размеры не совпадают. Например, если ваш SVG представляет собой короткий широкий прямоугольник, а ваш контейнер - высокий тощий прямоугольник, что должен сделать браузер с дополнительным пространством, чтобы оно поместилось?

[Будь осторожен! Значения браузера по умолчанию для preserveAspectRatio сильно отличаются!]

ответил emersonthis 19 MaramWed, 19 Mar 2014 01:50:50 +04002014-03-19T01:50:50+04:0001 2014, 01:50:50
0

вы можете применить преобразование svg к содержимому тега SVG. или вы также можете использовать метод CSS3 transform.

.svg {width:100%; display:block;
transform:scale(5); 
-webkit-transform:scale(5); 
-moz-transform:scale(5); 
-ms-transform:scale(5); 
-o-transform:scale(5);
}

<svg class="svg" preserveAspectRatio="xMidYMid meet" viewbox="0 0 102 102">
<g transform="scale(0.5)">
/*rest code will come inside this.*/
</g>
</svg>

Вот ваше рабочее демо. http://jsfiddle.net/jA62R/10/

ответил Kheema Pandey 18 MarpmTue, 18 Mar 2014 23:13:37 +04002014-03-18T23:13:37+04:0011 2014, 23:13:37

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132