被CSS＆style击败的SVG属性优先？

Question

我有带有指定笔触属性的SVG行。

<line class="myLine" stroke="red" x1="40" x2="200" y1="100" y2="100" stroke-width="5" />

还有一个CSS类，其中包含笔触值：

line.myLine
{
  stroke:green
}

CSS类实际上如何优先于显式svg属性，并且该行呈现为绿色？

同时，如果我在其中添加带有笔触的样式属性，则样式将覆盖CSS类和笔触svg属性。因此，优先级顺序如下：

1. 样式属性
2. CSS类
3. svg属性

SVG属性为何是最低优先级？？？

https://jsfiddle.net/pmunin/6j5woyry/

Answer 1

对该标准进行长时间阅读：https : //www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes

因此，presentation属性将参与CSS2级联，就好像它们被放置在作者样式表开始处的特定CSS样式规则所取代（特异性为零）。通常，这表示表示属性的优先级低于作者样式表或“样式”属性中指定的其他CSS样式规则。

Answer 2

希望这还不算太晚，但这帮助我真正理解了这个问题：

SVG 元素上的属性处于最低优先级，如属性规范中所述： https: //www.w3.org/TR/SVG/styling.html#PresentationAttributes

这意味着，如果您想要特定元素上的特定属性，请将其添加到style="[...]"该元素的属性中，使其具有最高的特异性，因此具有最高的优先级。

例如，如果您想像原始示例一样覆盖描边，请使用style="stroke: red;"代替stroke="red"。如果您使用的是 D3 等库，请确保您使用的.style()是而不是.attr()设置高优先级样式。

希望对其他人有帮助。