在 Firefox 中使用 CSS 设置 SVG 元素的宽度/高度属性答案

【问题标题】：Setting SVG element width/height attributes using CSS in Firefox在 Firefox 中使用 CSS 设置 SVG 元素的宽度/高度属性
【发布时间】：2018-10-04 09:44:27
【问题描述】：

我正在尝试使用 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

【问题讨论】：

你能简化一下jsfiddle中的例子吗？
好像是我自己做的：jsfiddle.net/fpqs09a0
只有 chrome 支持从 css 设置矩形的宽度和高度。 IE、FF 和 Opera 12 没有。
@Qwertiy - 这可以解释我所看到的。你知道一个关于这个的链接吗？我的 google-fu 今天好像没了。

标签： css firefox svg

【解决方案1】：

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

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

（开发中）SVG 2 规范将允许使用 CSS 设置所有属性的样式。一些浏览器开始支持这一点。但目前你还做不到。

更新：并非所有属性都可以在 SVG2 中设置样式。 styleable presentation attributes is here的列表。

【讨论】：

谢谢。现在我知道要寻找什么了，我找到了一个 article，它稍微扩展了您的答案。

【解决方案2】：

我总是将我的 SVG 包裹在 <span> 或 <div> 中，然后根据 SVG 本身调整该元素的大小。

div {
  height: 20px;
  width: 20px;
  transform: translateX(50%) rotate(-30deg);
// you can essentially do everything in the div versus the svg
}

svg {
  height: 100%;
  width: 100%;
  fill: white
}

【讨论】：

我认为我的问题措辞不佳。我正在寻找设置 rect/foreignObject/等元素的宽度和高度。使用 CSS 而不是父
请参阅我对问题的评论中的 jsfiddle 链接。