我正在学习SVG并且遇到了这个MDN resource,其中指出了所有SVG表示属性可以用作CSS属性。"换句话说,在我的样式表中,这应该有效:
svg { color-interpolation: sRGB }
请注意,演示属性列表不包括所有SVG属性,如here所示(例如, fx 和 fy 不包括在演示文稿中属性列表)
基于这些,我认为以下不应该奏效。
转到this MDN resource并打开此椭圆的codepen。你会看到这个SVG:
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="60" cy="60" rx="50" ry="25"/>
</svg>
根据演示属性,请注意,没有任何省略号属性(例如, rx )是表现性的。所以我的(不正确的)信念是以下不应该起作用:
<ellipse cx="60" cy="60" ry="25"/> // remove inline rx attribute
并将其移到我的样式表中:
ellipse { rx: 50 }
但是,基于codepen,这显然可以工作,甚至可以将所有这些非表示属性移动到样式表中:
<ellipse /> // removed all "non-presentational" attributes
ellipse { cx:60; cy:60; rx:50; ry:25; } // written into the stylesheet -> this regenerates the ellipse
因此,与MDN文档不同,是否可以将所有SVG属性从内联移动到CSS样式表?