gpt4 book ai didi

html - Mozilla 无法使用 svg stroke-dashoffset

转载 作者:行者123 更新时间:2023-11-28 01:53:59 25 4
gpt4 key购买 nike

它在 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 });

最佳答案

您可以使用 css 为 svg 设置动画,a fiddle但我注意到,对于 chrome,在此处输入代码与 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 并且它会正确设置动画。

关于html - Mozilla 无法使用 svg stroke-dashoffset,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18298482/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com