Firefox忽略SVG中的内联CSS，chrome显示它
Firefox忽略SVG中的内联CSS，chrome显示它
提问于 2019-06-30 21:50:58
我一直在做一个SVG的动画徽标，它很简单。我用javascript函数animate()触发它。
当我在chrome中运行animate()时，样式成功应用并显示了徽标，但是当我在firefox中执行同样的操作时，它失败了。
我还注意到SVG中的内联块不会被应用，不管我把它放在文档中的什么地方，因此我得出结论，这一定是内联CSS的问题。
下面是我当前的代码：
<svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" id="svg8">
<defs>
<style>
.rect{
height:0px;
transition:height 1s ease;}
</style>
</defs>
<g id="layer1" transform="translate(0 -197)" fill-opacity=".617" stroke-width="13.229">
<rect class="rect" id="logo-2" width="16.611" x="-120.759" y="-266.945" ry="8.305" transform="rotate(-165)" opacity=".71" fill="#ff584a"/>
<rect class="rect" id="logo-1" width="16.611" x="-40.446" y="205.589" ry="8.305" transform="rotate(-15)" opacity=".71" fill="#ff584a"/>
<rect class="rect" id="logo-3" width="16.611" x="-6.786" y="214.383" ry="8.305" transform="rotate(-15)" opacity=".71" fill="#0a3fa6"/>
</g>
<script>
function animate(){
document.getElementById('logo-1').style="height:83.055px;";
document.getElementById('logo-2').style="height:83.055px;";
document.getElementById('logo-3').style="height:83.055px;";
console.log("IT WORKS");
}
</script>
</svg>
有趣的是，在firefox检查器中，CSS被应用了，但是在文档中它本身并没有改变...
我不确定这是firefox的错误还是故意的行为，或者我在代码中做错了什么，任何帮助都将不胜感激！
回答 2
Stack Overflow用户
发布于 2019-06-30 21:57:15
让rect元素的width、height、x和y成为CSS属性，可以通过CSS动画来实现，这是SVG2规范的一个新特性。在SVG1.1中，这样的东西是属性，并且只能用javascript和SMIL进行动画处理。
幸运的是，Firefox刚刚实现了SVG2的这一部分，从Firefox69开始，它将如您所愿地工作。如果你想测试一个nightly，你可以现在就试一下。
可以等待，也可以将动画转换为SMIL。
Stack Overflow用户
发布于 2019-06-30 22:06:23
正如Robert Longson所提到的，目前还不能使用CSS对SVG元素的高度进行动画处理。
下面是如何使用SMIL动画来完成此操作：
<svg viewBox="0 0 100 100" id="svg8">
<style type="text/css">
<![CDATA[
.rect{
stroke:black;}
]]>
</style>
<g id="layer1" transform="translate(0 -197)" fill-opacity=".617" stroke-width="13.229">
<rect class="rect" id="logo-2" width="16.611" x="-120.759" y="-266.945" ry="8.305" height="0" transform="rotate(-165)" opacity=".71" fill="#ff584a">
<animate
attributeName="height"
attributeType="XML"
values="0;83.055"
dur=".5s"
fill="freeze"/>
</rect>
<rect class="rect" id="logo-1" width="16.611" x="-40.446" y="205.589" ry="8.305" height="0" transform="rotate(-15)" opacity=".71" fill="#ff584a">
<animate
attributeName="height"
attributeType="XML"
values="0;83.055"
dur=".5s"
fill="freeze"/>
</rect>
<rect class="rect" id="logo-3" width="16.611" x="-6.786" y="214.383" ry="8.305" height="0" transform="rotate(-15)" opacity=".71" fill="#0a3fa6">
<animate
attributeName="height"
attributeType="XML"
values="0;83.055"
dur=".5s"
fill="freeze"/>
</rect>
</g>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56825377
复制相关文章
相似问题
腾讯云开发者
