Как оживить SVG?

Question

Я бы хотел использовать jQuery"animate" - вызов для анимации SVG.

SVG должен быть повернут или масштабирован.

---

До сих пор я пробовал этот простой код, но, очевидно, он пока не работает:

$("#svg").animate({
  transform: "scale(0.4)"
}, 400)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
        <g transform="translate(0.005) scale(0.022)">
            <path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
        </g>
    </svg>

---

Я также добавил эту строку $("#svg").css({transform: "scale(0.4)"}), чтобы попытаться применить стиль scale к элементу, и, тем не менее - это работает .

---

Как я могу исправить эту проблему, почему я не могу анимировать элемент SVG? Спасибо за любую помощь, спасибо.

Answer 1

Также один хороший веб-инструмент, который сделал SVG Gator, вы можете попробовать здесь: https://app.svgator.com/

Есть несколько активов анимации.

С уважением.

Answer 2

Вы хотите, чтобы оно оживляло и уменьшало svg?Вот снайпер, где это работает

$("#svg").animate({
  width: "10%", height: "10%"
}, 400)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
        <g transform="translate(0.005) scale(0.022)">
            <path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
        </g>
    </svg>

Вот документация для использования функции анимации: здесь

или сделать это с помощью CSS

#svg {
  animation: reduce 2s 2; /* To make the animation twice */
}
@keyframes reduce {
    from {transform : scale(1);}
    to {transform : scale(0.4);}
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
        <g transform="translate(0.005) scale(0.022)">
            <path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
        </g>
    </svg>

Я делаю анимацию дважды, но делаю так, как вы хотите, с помощью свойства animation-iteration-count: документация здесь

Хотелось бы, чтобы это помогло вам!