Стилизация элемента SVG с помощью CSS3

Question

Я работаю над интерфейсом для веб-приложения. Я закончил html5 / css3 часть, осталось только пара элементов svg. Проблема в том, что у меня есть разные темы для приложения, поэтому я не уверен, как стилизовать эти элементы SVG, чтобы они менялись вместе с темой. Я думаю, один из способов - создать разные файлы .svg для каждой темы, но есть ли способ дать элемент svg (его можно включить в html-файл, он не должен быть внешним файлом), границы, градиент, тень и так далее, используя только CSS?

Answer 1

Вы можете использовать CSS, чтобы изменить цвета элемента SVG через свойства обводки и заливки. Например, вы можете сделать что-то вроде:

rect
{
   fill: blue;
   stroke: black;
}

Если вы не хотите изменять, скажем, все прямоугольники, вы можете определить классы в SVG и изменить их свойства заливки и обводки.

К сожалению, вы не можете изменить границы, градиенты и тени в SVG-изображении с помощью CSS. По крайней мере, не так, как вы изменили бы это в элементах HTML с CSS3. Вы можете сделать многое программно, хотя. Например, если у вас есть тенеподобные фильтры , определенные в вашем SVG-изображении, вы можете динамически применить его к любому элементу, изменив его свойство фильтра в CSS:

filter:url(#filterName);

Ссылка, опубликованная Филиппом, перечисляет все атрибуты SVG, которые можно изменить с помощью CSS Вы всегда можете изменить свой SVG программно, но в вашем случае это вряд ли стоит того.