css - 在 Firefox 中使用 CSS 设置 SVG 元素宽度/高度属性

Question

我正在尝试使用 CSS 设置 SVG 元素的宽度和高度属性，而不是将它们内联，但我似乎无法在 Firefox 中使用它。

当我在元素上设置内联宽度/高度时，它显示没有问题。

 <rect x="10px" y="50px" fill="green" width="20px" height="20px" />

当我尝试使用 CSS 设置宽度/高度时，它在 Chrome 中有效，但在 Firefox 中无效。

.box {
    width: 20px;
    height: 20px;
}

<rect class="box" x="50px" y="50px" fill="green" />

• 在 firefox 43 和 36 上都试过了，行为相同。
• 当我在 firefox 中检查缺失的 SVG 元素时，看起来好像正在应用 CSS，并且计算出的样式显示正确的宽度/高度值。
• 我希望我只是在做一些愚蠢的事情，而 Chrome 只是在“让它工作”。如果可能的话，我想避免浏览器特定的 CSS。

JSFiddle examples

Answer 1

并非所有 SVG 元素属性都可以使用 CSS 设置样式。只有指定为“属性”的才可以。请参阅下面的 SVG 规范列表。

https://www.w3.org/TR/SVG/propidx.html

(开发中的)SVG 2 规范将允许使用 CSS 设置所有属性的样式。一些浏览器开始支持它。但目前您还不能这样做。

更新:并非所有属性都可以在 SVG2 中设置样式。 styleable presentation attributes is here的名单| .