Можно ли масштабировать встроенный SVG с помощью CSS?

Я хочу использовать стили CSS для управления размером SVG-проектов. Например...

.svg { width:100%; }

Когда я внедряю SVG-образ из файла, он действует так же, как и любое другое изображение и прекрасно работает:

<img src="image.svg" class="svg" />

Но когда я использую встроенный SVG, он НЕ работает:

<svg class="svg">...</svg>

svg "box" будет расти, но содержимое останется неизменным.

Есть ли способ сделать это?

Ответы

Ответ 1

Первый и, вероятно, лучший метод, который вы можете использовать, - это использовать атрибут viewBox. Это приведет к тому, что содержимое svg-тега автоматически примет заданную ширину и высоту самого svg-тега, только показывая, что в пределах определенных границ. Например:

<svg width="82" height="82" viewbox="0 0 102 102">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>

В качестве альтернативы вы можете применить svg transform к содержимому тега SVG, который будет выглядеть следующим образом:

<svg width="82" height="82">
    <g transform="scale(0.8)">
        <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
        <text fill="black" x="10" y="30">FooBarBaz</text>
    </g>
</svg>

Наконец, вы можете попробовать использовать CSS3 transform для масштабирования всего элемента svg. Это наименее поддерживаемый метод, но я упоминаю его в любом случае, потому что вы изначально попросили решение для CSS. Я настоятельно рекомендую использовать одно из вышеупомянутых решений, хотя это возможно вообще.

<svg width="102" height="102" style="transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>