在那些显然不支持此代码的浏览器中，有什么方法可以达到这种效果吗

Is there any way to achieve this effect in browsers that apparently do not support this code?

本文关键字：方法 什么 不支持 代码 浏览器 在那些      更新时间：2023-09-26

这是HTML:

<div id="container">
    <svg>
        <path id="polyline" d="
            M0,5
            L184,5
            C205,4 202,6 202,13
            L202,86
            L327,86
            L421,166
            L460,166
            L499,132
            L588,211
            L617,211
            L712,134
            L748,165
            L780,165
            L830,111
            L913,212
            L938,212
            L1028,140
            L1078,184
            L1107,184
            L1152,140
            L1263,249"
        />
        <defs>
            <pattern id="pattern" width="1920" height="1080" patternUnits="userSpaceOnUse">
                    <image xlink:href="forest.jpg" width="1920" height="1080" />
            </pattern>
        </defs>
    </svg>
</div>

这是CSS：

#container {
    width:1263px;
    height:255px;
    position:absolute;
}
#container svg {
    width:100%;
    height:100%;
    fill:none;
    stroke:url(#pattern);
    stroke-dasharray:1626.7125244140625;
    stroke-dashoffset:1627;
    stroke-linecap:square;
    stroke-width:8;
    animation:polyline 3.15s linear 0.5s forwards;
}
@keyframes polyline {
    to {
        stroke-dashoffset:0;
    }
}

演示

  • 所有这些在Chrome中都能正常工作
  • 它在没有stroke-dashoffset的Edge中工作，因此在没有CD_2的情况下工作
  • 它在Firefox/Waterfox中根本不工作

有没有一种方法可以在浏览器之间实现这种效果

或者我的代码有问题吗

提前感谢！<333

在Firefox（最新版本）中测试效果良好，但根据链接，Firefox中支持带有自己前缀的动画：

  -moz-animation: polyline 3.15s linear 0.5s forwards;
相关文章：