本文介绍了Mozilla没有使用svg stroke-dashoffset的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在谷歌浏览器中运行良好，但在Mozilla Firefox中我的svg路径突然出现！
怎么了？
It works well in Google Chrome, but in Mozilla Firefox my svg path suddenly appears!
What's wrong?
正文：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 390 170" enable-background="new 0 0 390 170" xml:space="preserve">
<path id="ADM-A" class="ADM-SVG"
d="M78.246,105.517c0,0-27.246-0.517-27.246-26.972c0-24.878,25.626-25.211,25.626-25.211S103,54,103,80.113c0,22.554,0,26.779,0,26.779"
/>
</svg>
风格：
.ADM-SVG {
fill: none;
stroke: #ffffff;
stroke-width: 17;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
stroke-opacity: 1;
stroke-dasharray: 220;
stroke-dashoffset: 220;
-webkit-transition-property: stroke-dashoffset;
-webkit-transition-duration: 10s;
-moz-transition-property: stroke-dashoffset;
-moz-transition-duration: 10s;
transition-property: stroke-dashoffset;
transition-duration: 10s;
}
脚本：
$("#ADM-A").css({ "stroke-dashoffset": 0 });
推荐答案
你可以用css动画svg，但是我注意到对于chrome输入代码这里vs firefox他们以不同的方式设置动画。
You can animate svg with css, a fiddle but I noticed that for chrome enter code here vs firefox they animate it differently.
以下适用于firefox：
The following works for firefox:
.logo-rect {
fill: transparent;
stroke:#333;
stroke-width:3px;
stroke-dashoffset:-120;
stroke-dasharray:360 360;
opacity:1;
transition: stroke-width 2s, stroke-dashoffset 2s, stroke-dasharray 2s, opacity 2s;
}
但是对于Chrome，将数据偏移更改为-360并且它将正常生成动画。
However for Chrome change the dataoffset to -360 and it will animate properly.
这篇关于Mozilla没有使用svg stroke-dashoffset的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！