Question

这是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;
    }
}

DEMO

所有这些在Chrome中运行良好。
适用于Edge ，不含 stroke-dashoffset，因此不含 animation。
在Firefox / Waterfox中完全不。

有没有办法在浏览器中实现这种效果？

或者我的代码有问题吗？

提前致谢！＆LT; 333

Answer 1

在Firefox中测试（最新）工作正常，但根据link动画，FireFox支持动画，并带有自己的前缀：

  -moz-animation: polyline 3.15s linear 0.5s forwards;

有没有办法在显然不支持此代码的浏览器中实现此效果？

1 个答案: