SVG属性优先被CSS＆amp;样式打败？

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 class＆amp; stroke svg属性。 所以优先级顺序如下：

1. 样式属性
2. css class
3. svg属性

为什么SVG属性的优先级最低???

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

Answer 1

长期阅读标准：https://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes

  

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

Answer 2

希望这还不算太晚，但这确实帮助我了解了这个问题：

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

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

例如，如果要像原始示例中那样覆盖笔划，请使用style="stroke: red;"而不是stroke="red"。如果您使用的是D3之类的库，请确保使用.style()而非.attr()来设置高优先级样式。

希望对别人有帮助。