使用css3为svg元素设置样式

Question

我正在为一个Web应用程序工作.我完成了html5/css3部分,唯一剩下的就是几个svg元素.问题是我对应用程序有不同的主题,所以我不确定如何设置这些svg元素的样式,以便它们随主题变化.我想有一种方法是为每个主题制作不同的.svg文件,但有没有办法给svg元素(它可以包含在html文件中,它不必是外部文件)边框,渐变,阴影等只使用css？

Answer 1

您可以使用CSS通过笔触和填充属性更改SVG元素的颜色.例如,你可以做类似的事情:

rect
{
   fill: blue;
   stroke: black;
}

如果您不想更改所有矩形,可以在SVG中定义类并更改其填充和描边属性.

不幸的是,您无法使用CSS更改SVG图像中的边框,渐变和阴影.至少,与使用CSS3在html元素中更改它的方式不同.不过,你可以以编程方式做很多事情.例如,如果在SVG图像中定义了类似阴影的过滤器,则可以通过在CSS中更改其过滤器属性来动态地将其应用于任何元素:

filter:url(#filterName);

philipp发布的链接列出了可以通过CSS更改的所有SVG属性 您可以随时以编程方式更改SVG,但在您的情况下可能不值得.