моя анимация рисования SVG работает на codepen, но не работает на моем сайте с sprite.svg

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 говорит , что для анимации только ссылочного элемента использования, а не всех экземпляров, на которые ссылается значок, вы должны использовать форму 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, это делает реакцию на наведение мыши немного более предсказуемой.

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