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

Question

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

什么被认为是更好的代码风格？

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

Answer 1

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

属性作为"演示提示"应用,就好像它们是级联样式表中的第一个一样.换句话说,这给了他们最低的优先权.

因此,从最低到最高的优先顺序是

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

有点令人困惑的是,内联样式的优先级比其下一个属性的优先级要高得多.(我一直要看这个!)

更多细节可以在SVG样式文档的Presentation Attributes部分的末尾找到.

Answer 2

我通常更喜欢<circle fill="yellow" />,<circle style="fill: yellow;" />因为它更短,更容易操纵,例如getAttributeNS(null, "fill").

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

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

它具有使用CSS的所有相同优点,例如可以轻松地一次更改许多元素的stlye.

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

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

在svg元素之前.

Answer 3

我在 css-trick 上找到了Presentation Attributes vs Inline Styles对此非常有用。

从中：