html - 使用 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 元素中更改它的方式不同。不过，您可以通过编程方式做很多事情。例如，如果您有 shadow-like filters在 SVG 图像中定义，您可以通过更改 CSS 中的过滤器属性将其动态应用于任何元素:

filter:url(#filterName);

philipp 发布的链接列出了 all SVG attributes that can be changed through CSS您始终可以通过编程方式更改您的 SVG，但在您的情况下可能不值得这么麻烦。