Svg Animation G-Element

SVG Animation G-element

Yes it is possible. Did you try it?

Demo:

@keyframes stroke_fill {    0% {        fill: white;    }    50% {        fill: white;        stroke-dashoffset: 0;    }    100% {        fill: black;        stroke-dashoffset: 0;    }}
.animation{    animation: stroke_fill 4s ease forwards;    stroke-dasharray: 324.774;    stroke-dashoffset: 324.774;     stroke: red;    stroke-width: 10;}

<svg>  <g class="animation">    <rect x="20" y="20" width="120" height="120" />    <rect x="160" y="20" width="120" height="120" />  </g></svg>

Animating an SVG Group

Note: You may want to reconsider using SMIL animations instead of CSS animations because Chrome has deprecated support for SMIL animations from v45.

There were two problems in your code and they are as follows:

1. The rotate transform in SVG just takes the degree number as value and doesn't need the deg suffix to be added to it. In addition a transform origin can also be specified (2^nd and 3^rd param) but it is not mandatory.
2. There was a style='transform: rotate(...)' on the .rotatable element. The CSS overrides the animateTransform and so you don't get to see any rotation. Avoid this stylesetting. If there is a need for an initial rotation you could probably use SVG's transform attribute.

Below is a working demo:

<svg class="tower owner" height="60" width="60" viewBox="0 0 300 300">  <g transform="translate(75 75)" opacity="1">    <ellipse class="border" cx="0" cy="0" fill="#222" rx="65" ry="65" stroke-width="5"></ellipse>    <g class="rotatable" transform="rotate(315)">      <rect fill="#aaa" height="50" stroke-width="7" stroke="#181818" width="40" x="-20" y="-80"></rect>      <rect fill="#555" height="58" rx="12" ry="10" width="78" x="-39" y="-25"></rect>      <rect fill="#ffe56d" height="46.4" y="-13.399999999999999" rx="12" ry="12" width="78" x="-39"></rect>      <animateTransform attributeName="transform" attributeType="XML" dur="5s" keyTimes="0;0.4;0.75;1" repeatCount="indefinite" type="rotate" values="315;90;200;315" calcMode="linear"></animateTransform>    </g>  </g></svg>

Cannot apply animation on SVG g element

OK, I changed to animation here with following.

<animateTransform
    attributeType="XML"
    attributeName="transform"
    type="translate"
    from="0,0" to="1000,1000"
    begin="0s" dur="1"
    repeatCount="indefinite"/>

And it started to work.

UPDATE

I found a better solution. In the first one, after animation my group element is returning to its original position. With the follwing it stays where it is.

<animateMotion
    from="0,0" to="500,0"
    dur="4s" fill="freeze"/>

How can I animate a group of objects in SVG?

The fill on the rect elements has a greater CSS specificity than the fill on the g element. Remove the rect elements fill to fix.

<svg width="800" height="600" style="background-color:black">
<g id="rects"><rect x="50" y="400" width="50"height="20" /><rect x="50" y="470" width="50"height="20" /></g>
<animate xlink:href="#rects"attributeName="fill" dur="4s"repeatCount="indefinite"values="gold; gold; ivory; gold"keyTimes="0; 0.7; 0.8; 1" />
</svg>

SVG elements CSS transition inside g tag on Chrome

A pretty sneaky bug, but easily solved: just restrict the child selector to non-g elements:

    svg {        width: 200px;        margin: 50px;    }
    svg :not(g) {        transition: fill 1s;    }
    svg:not(:hover) * {        fill: gray !important;    }

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">        <rect x="0" y="0" width="1" height="1" style="fill: red" />        <rect x="1" y="0" width="1" height="1" style="fill: green" />        <rect x="2" y="0" width="1" height="1" style="fill: blue" />    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">        <g>            <rect x="0" y="0" width="1" height="1" style="fill: red" />            <rect x="1" y="0" width="1" height="1" style="fill: green" />            <rect x="2" y="0" width="1" height="1" style="fill: blue" />        </g>    </svg>

---

Related Topics