使用css3为svg元素设置样式

Question

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

Answer 1

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

rect
{
   fill: blue;
   stroke: black;
}

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

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

filter:url(#filterName);

philipp发布的链接列出all SVG attributes that can be changed through CSS 您可以随时以编程方式更改SVG，但在您的情况下可能不值得。