css修改svg图形背景色_使用CSS样式化可缩放矢量图形（SVG）

今天，我们将继续有关可伸缩矢量图形（SVG）的讨论，正如我们在前一篇文章中指出的那样，使用SVG的优点之一是可以使用CSS对其进行样式设置。

SVG样式属性

SVG的样式基本上与常规HTML元素的工作方式相同，实际上它们也共享一些公共属性。 但是，还有其他一些专门用于SVG对象的属性，除了CSS之外，它们还有自己的规范。

例如 ，在常规HTML元素中，我们可以使用background-color或background CSS属性添加背景色。 在SVG中，它有所不同。 而是使用fill属性指定背景色。 另外，元素的边框是使用stroke属性指定的，而不是像常规HTML中那样使用border ，您可以在此处看到完整的列表 。

如果您使用诸如Adobe Illustrator之类的矢量编辑器已经很长时间了，那么您可以很快猜到SVG中的属性命名机制源自该编辑器。

SVG样式实现

我们可以使用以下方式之一来设置SVG元素的样式：

表示属性

如果您看到了所有SVG属性列表 ，则可以将它们全部直接添加到元素上以更改元素的表示形式。 以下示例说明了如何直接在rect元素上添加fill和stroke属性；

矩形看起来像下面的截图；

内联样式表

我们还可以使用style属性添加样式。 在下面的示例中，我们还将向rect添加fill和stroke ，但是这次我们将其添加到style ，并使用CSS3 transform属性将其旋转，就像这样；

矩形将以相同的结果旋转，只是现在也旋转了。

内部样式表

也可以将SVG样式嵌入到style元素中，这与我们在常规HTML上的处理方式没有什么不同。 下面的示例显示了如何添加内部样式以影响.html文档中的SVG元素。

但是，SVG是一种基于XML的语言，因此，当我们要在.svg文档中添加内联样式表时，需要将样式声明放入cdata ，如下所示：

这里的cdata是必需的，因为CSS可以具有>字符，该字符将与XML解析器冲突。 强烈建议使用cdata在SVG中嵌入样式，即使样式表中未给出冲突的字符也是如此。

外部样式表

外部样式表也适用于.html文档中的SVG元素。

同样，在.svg文档中，我们需要像这样将外部样式表引用为xml-stylesheet 。

分组元素

SVG元素可以与元素分组。 分组元素将使我们能够与组中的所有元素共享通用样式。

矩形和圆形都将具有相同的结果。

最终思想

我们已经介绍了使用CSS样式SVG的所有基本事项，这只是使用SVG提供图形服务的优势之一。 在下一篇文章中，我们将进一步研究另一篇文章，敬请期待。

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/