Question

我正在尝试制作一个svg绘制动画，我实际上在codepen（https://codepen.io/anon/pen/RyvmRm）中完成了一个，但在我的网站上，动画不想工作。在我的网站上，我使用sprite.svg。也许鼠标悬停不起作用，因为精灵？我真的不知道。谢谢你的帮助。而且我改变了我的图标，所以路径长度与码本不同。

<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），它由shadow DOM和包含的路径继承。唯一的问题：路径长度不同，但您只能设置一个动画值。

还有一个解决方案：pathLength属性。您可以为这两个路径设置一个人工pathLength="1000"，stroke-dasharray和stroke-dashoffset将重新计算，就好像这样。

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

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

所以，这里有一个至少适用于Firefox和Chrome的变体（Edge / IE不实现SMIL动画）。要进行删除，sprite svg是内联的，但是如果你遵循这种模式，它也适用于外部文件。

请注意pointer-events:visible，它会对mouseover做出更多可预测的反应。

<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>

我的SVG绘图动画适用于codepen，但它在sprite.svg的网站上不起作用

1 个答案: