在Firefox中使用CSS设置SVG元素的width/height属性 [英] Setting SVG element width/height attributes using CSS in Firefox

问题描述

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

I'm trying to set the width and height attributes of SVG elements using CSS instead of putting them inline but I can't seem to get it working in firefox.

当我在元素上设置宽度/高度内联时，它不会出现任何问题.

When I set the width/height inline on the element it displays with no problems.

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

当我尝试使用CSS设置宽度/高度时，它可以在Chrome浏览器中工作，但不能在Firefox中使用.

When I try to set the width/height using CSS it works in Chrome but not in Firefox.

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

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

• 在Firefox 43和36中以相同的行为对此进行了尝试.
• 当我检查firefox中缺少的SVG元素时，看起来好像正在应用CSS，并且计算出的样式显示了正确的width/height值.
• 我希望自己只是在做一些愚蠢的事情，而Chrome浏览器只是在使其正常工作".我想尽可能避免使用特定于浏览器的CSS.

JSFiddle示例

推荐答案

并非所有SVG元素属性都可以使用CSS设置样式.只能指定为属性"的属性.请参阅SVG规范中的以下列表.

Not all SVG element attributes can be styled with CSS. Only the ones designated as "properties" can be. See the list below from the SVG specification.

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

(正在开发中的)SVG 2规范将允许使用CSS设置所有属性的样式.并且一些浏览器开始支持该功能.但是现在您将无法做到这一点.

The (in development) SVG 2 specification will allow all attributes to be styled with CSS. And some browsers are starting to support that. But for now you won't be able to do it.

更新:并非所有属性都可以在SVG2中设置样式. 可样式化的演示文稿属性列表.

Update: Not all attributes will be styleable in SVG2. The list of styleable presentation attributes is here.

这篇关于在Firefox中使用CSS设置SVG元素的width/height属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！