微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

 

当我尝试使用CSS设置宽度/高度时,它适用于Chrome,但不适用于Firefox.

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

Box" x="50px" y="50px" fill="green" />

>在firefox 43和36中尝试了同样的行为.
>当我检查firefox中缺少的SVG元素时,看起来CSS正在应用,计算出的样式显示正确的宽度/高度值.
>我希望我只是做一些愚蠢的事情而Chrome只是“让它发挥作用”.我想尽可能避免浏览器特定的CSS.

JSFiddle examples

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

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

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

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

原文地址:https://www.jb51.cc/css/427239.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。