2

它在 Google Chrome 中运行良好，但在 Mozilla Firefox 中我的 svg 路径突然出现！
怎么了？

身体： 

<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 });
4

1 回答 1

1

您可以使用 css 为 svg 制作动画，这是一个小提琴，但我注意到对于 chrome enter code here vs firefox，它们的动画效果不同。

以下适用于 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，将 dataoffset 更改为 -360，它会正确设置动画。

于 2014-01-31T16:03:10.950 回答