SVG：使用属性或CSS来设置样式？

Question

在HTML中，建议从Style中分离Content，因此您应该为样式创建外部CSS文件。由于我刚刚开始使用SVG，我现在想知道：此规则是否也适用于SVG？

什么是更好的代码风格？

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

Answer 1

我到这里是因为我试图记住属性或风格是否具有更高的优先级。这是你想要一个在另一个之上的一个实际原因。

属性被应用为＆＃34;演示提示＆＃34;，就像它们是第一个级联样式表一样。 In other words, this gives them lowest precedence.

因此，从最低到最高的优先级是

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

有点令人困惑的是，内联样式的优先级远高于其旁边的属性。 （我一直要看这个！）

更多细节可以在Presentation Attributes section of the SVG styling document。

的末尾找到

Answer 2

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

但是，我更喜欢使用单独的样式元素，就像HTML一样，例如：

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

使用CSS具有所有相同的优点，例如可以轻松地同时更改许多元素的数量。

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

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

在svg元素之前。

Answer 3

区别在于它的内容或它的表现。

如果圆圈是内容并且必须显示css是否可用，那么第一个选项就是那个。

但是，如果圈子只是网站的一部分，并且没有向内容添加任何内容，那么它应该是第二个选项。或者使用css类。

Answer 4

我发现Presentation Attributes vs Inline Styles on css-trick对此非常有用。

通过它：

尽管看起来很琐碎，但要补充的一件事是，以上所有规则（特别是表示属性）优先于任何特异性较低的规则。那就是：

<svg>
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

将胜过CSS规则：

line {
  stroke: black;
}