Coding style SVG：使用属性还是CSS来设置样式？

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

什么是更好的代码风格

• 或

---

区别总是在于内容还是表现

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

---

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

我通常更喜欢

而不是

，因为它比较短，而且很容易使用，例如

getAttributeNS（null，“fill”）

进行操作

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

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

圈{
填充物：黄色；
}

它具有与使用CSS相同的优点，例如可以轻松地同时更改大量元素的STLY

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

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

---

在svg元素之前。

我来到这里是因为我试图记住属性或样式是否具有更高的优先级。这是一个实际的原因，为什么你想要一个而不是另一个

属性作为“表示提示”应用，就像它们是级联样式表中的第一个一样

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

属性

CSS样式表

内联样式

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

不会有任何新的表示属性，我们被鼓励改用CSS样式，但听起来表示属性不会很快消失

更多细节可以在中找到。

我发现这非常有用

从中：

---

这是一个很好的论据，但我要重新表述一下：如果圆圈是黄色是内容（也许是《辛普森一家》中的人物画），那么它应该是一个属性；如果圆圈为黄色纯粹是偶然的（并且可以归因于出版物的其余部分使用了大量黄色），那么它应该是CSS。这还有一个优点，即它可以通过使用单个样式替换每个重复属性，从而使SVG文件变小。很抱歉投了反对票，但是与infographic.OMG@Gordon相矛盾的是，你是对的！谢谢你指出这一点。我已经编辑了我的答案，以删除该声明。这里有一把小提琴来证明你是对的：