SVG 属性优先被 CSS 和样式打败? [英] SVG attributes beaten by CSS&style in priority?

问题描述

我有指定笔划属性的 SVG 线.

I have SVG line with specified stroke attribute.

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

并且有一个包含笔划值的 CSS 类:

And there is a CSS class that has stroke value in it:

line.myLine
{
  stroke:green
}

为什么 CSS 类实际上优先于显式 svg 属性并且线条呈现为绿色???

How come CSS class actually takes priority over explicit svg attribute and the line renders as green???

同时，如果我在其中添加带有笔划的样式属性，则样式会覆盖 css 类 &中风 svg 属性.所以优先级顺序如下:

At the same time if I add style attribute with stroke in it, then style overrides css class & stroke svg attribute. So the priorities order is the following:

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

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

How come SVG attribute is the lowest priority???

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

推荐答案

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

表示属性因此将参与 CSS2 级联，就好像它们被放置在作者样式表开头的相应 CSS 样式规则替换一样，特殊性为零.一般来说，这意味着表示属性的优先级低于作者样式表或样式"属性中指定的其他 CSS 样式规则.

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.

这篇关于SVG 属性优先被 CSS 和样式打败?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！