How to animate SVG?

Question

I'd like to use the jQuery "animate"-call to animate a SVG.

The SVG should get for example rotated or or scaled.

What I've tried so far was this simple code but obviously this is not working so far:

$("#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>

I also added this line $("#svg").css({transform: "scale(0.4)"}) to try if the scale style will be applied on the element, and however - this is working.

How can I fix this issue why I'm not be able to animate the SVG element? Any help would be very appreciated, thanks.

Possible duplicate of [jQuery animate SVG element](https://stackoverflow.com/questions/11789665/jquery-animate-svg-element) — StudioTime, Apr 24 '18 at 16:34
Welcome to SO, it's always a good idea to search before asking questions. — StudioTime, Apr 24 '18 at 16:35
I don't believe you can use `animate` with `transform`. Try specifying a new `width` and `height` instead, or else switch to [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions). — Blazemonger, Apr 24 '18 at 16:36
@DarrenSweeney This is not the problem. As the OP stated, setting `transform:scale(0.4)` directly works, this is valid CSS. But like @Blazemonger said, jQuery `.animate()` expects a number, not a function as property. Here's a workaround: https://stackoverflow.com/questions/36243887/how-to-do-a-transform-scale-animation-with-jquery — ccprog, Apr 24 '18 at 21:00

Bambou · Answer 1 · 2018-04-26T13:31:22.163

You want it to animate and reduce the svg that's right ? Here's a snipper where it works

$("#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>

Here's the documentation to use the animate function : here

or do it with 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>

I make the animation twice but do as you want with the animation-iteration-count property : documentation here

Wish it helped you !

score 0 · Answer 2 · answered Apr 26 '18 at 13:29

0

Also one good web tool what SVG Gator made you can try here: https://app.svgator.com/

There is a few assets of animations.

Best regards.

answered Apr 26 '18 at 13:29

Peki Peki

7
2

How to animate SVG?

2 Answers2