javascript - 我的 SVG 绘图动画在 codepen 上有效，但在我的 sprite.svg 网站上无效

Question

我正在尝试制作一个 svg 绘图动画，实际上我在 codepen ( https://codepen.io/anon/pen/RyvmRm ) 中做了一个，但在我的网站上动画不工作。在我的网站上，我使用 sprite.svg。也许鼠标悬停因为雪碧而不起作用？我真的不知道。感谢您的帮助。我稍微更改了图标，使路径长度与 codepen 不同。

<symbol id="person1" x="0px" y="0px" viewBox="0 0 578.43 551.6" style="enable-background:new 0 0 578.43 551.6;" xml:space="preserve">
        <defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:15px;}</style></defs>
        <path stroke-dasharray="946" class="cls-1" d="M280.79,314.56a150.83,150.83,0,0,0,150.8-150.8c0-83.27-67.54-150.35-150.8-150.35S130,81,130,163.76,197.52,314.56,280.79,314.56Z" transform="translate(7.5 -5.91)">
            <animate begin="person1.mouseover" attributeName="stroke-dashoffset" values="946; 0" dur="1s" calcMode="linear"></animate>
        </path>
        <path stroke-dasharray="1365" class="cls-1" d="M19.89,550H543.54a19.75,19.75,0,0,0,19.89-19.9c0-104.08-84.65-189.19-189.2-189.19h-185C85.12,340.93,0,425.58,0,530.12A19.75,19.75,0,0,0,19.89,550Z" transform="translate(7.5 -5.91)">
            <animate begin="person1.click" attributeName="stroke-dashoffset" values="1365; 0" dur="1s" calcMode="linear"></animate>
        </path>
</symbol>

Answer 1

由于浏览器实现不完整，这有点尴尬。

首先，让我们看看规范中必须说明的内容所引发的问题。你的动画引用begin="person1.mouseover" . person1是符号元素本身。 SVG 2 says要仅对引用的 use 元素进行动画处理，而不是对引用图标的所有实例进行动画处理，您必须使用 begin="mouseover" 的形式, 没有识别一个元素。目前仅由 Firefox 实现。

相反，您必须放置 <animate>每个元素 <use>元素。原则上，这是可行的，因为您正在制作动画的是一个 CSS 属性 ( stroke-dashoffset )，它由影子 DOM 和包含的路径继承。唯一的问题:路径长度不同，但您只能设置一个动画值。

也有一个解决方案: pathLength 属性。您可以设置一个人工 pathLength="1000"对于两条路径，以及 stroke-dasharray和 stroke-dashoffset将被重新计算，就好像那是真的。

那是 Safari 落后的时刻，因为它没有实现该属性。

当 Firefox 引用外部文件时会出现第二组兼容性问题:使用 <style>元素不再有效。您必须将样式内嵌在 <symbol> 上元素并让它们被路径继承。

因此，这是一种至少在 Firefox 和 Chrome 中有效的变体(Edge/IE 不实现 SMIL 动画)。为了演示，sprite svg 是内联放置的，但如果您遵循这种模式，它也适用于外部文件。

注意 pointer-events:visible ，它使对鼠标悬停的 react 更加可预测。

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <symbol id="person2" viewBox="0 0 578.43 551.6"
            style="fill:none;stroke:#000;stroke-width:15px;stroke-dasharray:1000;pointer-events:visible;">
        <path id="p1" pathLength="1000" d="M280.79,314.56a150.83,150.83,0,0,0,150.8-150.8c0-83.27-67.54-150.35-150.8-150.35S130,81,130,163.76,197.52,314.56,280.79,314.56Z" transform="translate(7.5 -5.91)" />
        <path id="p2" pathLength="1000" d="M19.89,550H543.54a19.75,19.75,0,0,0,19.89-19.9c0-104.08-84.65-189.19-189.2-189.19h-185C85.12,340.93,0,425.58,0,530.12A19.75,19.75,0,0,0,19.89,550Z" transform="translate(7.5 -5.91)" />
    </symbol>
</svg>

<svg width="100" height="100"><use xlink:href="#person2">
    <animate begin="mouseover" attributeName="stroke-dashoffset"
             values="1000; 0" dur="1.5s" calcMode="linear"></animate>
</use></svg>
<span>or</span>
<svg width="100" height="100"><use xlink:href="#person2">
    <animate begin="mouseover" attributeName="stroke-dashoffset"
             values="1000; 0" dur="1.5s" calcMode="linear"></animate>
</use></svg>