使用css3设计svg元素

Question

我正在为web应用程序使用ui。我完成了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); 

张贴由菲利普链接列出all SVG attributes that can be changed through CSS 您可以随时更改您的SVG以编程方式，但它可能不值得在你的情况下的麻烦。