SVG：使用属性还是CSS进行样式设置？

Question

在HTML中，推荐将内容和样式分离，因此应为样式创建外部CSS文件。由于我刚开始使用SVG，我想知道：这个规则是否也适用于SVG？

什么是更好的代码风格？

• <circle fill="yellow" />
• 还是<circle style="fill: yellow;" />

- anroesti

Answer 1

我来到这里是因为我想起了属性和样式表哪个具有更高的优先级。这是你会喜欢一个而不是另一个的一个实际原因。

属性被应用为“演示提示”，就好像它们是层叠样式表中的第一个一样。 换句话说，这使它们具有最低的优先级。

因此，优先级从低到高为：

1. 属性
2. CSS 样式表
3. 内联样式

令人有些困惑的是，内联样式比其旁边的属性具有更高的优先级。(我总是要查这个！)

不会有任何新的演示属性，并且我们被鼓励使用 CSS 样式化代替，但似乎演示属性不会很快消失。

更多细节可以在 SVG 标准的样式章节的演示属性部分找到。

- Gordon

Answer 2

我通常更喜欢使用<circle fill="yellow" />而不是<circle style="fill: yellow;" />，因为它更短并且易于操作，例如getAttributeNS(null, "fill")。

但是，相比之下，我更喜欢使用单独的样式元素，就像在HTML中一样，例如：

  <style>
    circle{
      fill: yellow;
    }
  </style>    

使用Sass与CSS相比具有相同的优点，例如可以轻松地同时更改许多元素的样式。

您还可以将CSS放在外部文件中，并添加：

<?xml-stylesheet type="text/css" href="your_CSS.css" ?>

在 svg 元素之前。

- Peter Collingridge

---

这样做的好处是，通过将每个重复的属性替换为单个样式，可能会使SVG文件变得更小。 - Nick F

Answer 3

我发现css-trick上的演示属性与内联样式对此非常有用。

从中可以得到：

- Izhaki

---

抱歉给你点了踩，但是你的第二个观点是错误的，并且与信息图表相矛盾。 - Gordon

哦天啊，@Gordon，你说得对！感谢你指出来。我已经编辑了我的答案以删除那个声明。这是一个示例链接，显示你是正确的: https://jsfiddle.net/Izhaki/kphg4zLm/ - Izhaki

Answer 4

区别在于它是内容还是呈现形式。

如果圆圈是内容，并且必须显示是否有可用的CSS，则应选择第一种选项。

但是，如果圆圈只是网站设计的一部分，并且对内容没有任何添加，则应该选择第二个选项。或者使用CSS类。

- ramono

---

好的论点，但我会稍微重新表述一下：如果圆圈是黄色内容（比如《辛普森一家》中的角色画像），那么它应该是一个属性；如果圆圈是黄色纯属偶然（可能是因为出版物的其他部分使用了很多黄色），那么它应该在CSS中。 - Raphael Schweikert