Search code examples
svgsvg-animate

SVG loading animation - can I combine <use>and <def> and <animate>?

I have an SVG-based loading animation, aka "spinning weasel" but I'm wondering if I can code this more efficiently by utilizing a base animation (the fading out attributes) and referencing it in my <use> tags?

      <defs>
        <line 
            id="bit"
            x1="50" 
            y1="25" 
            x2="50" 
            y2="10"  
            stroke="#000000">
        </line>
    </defs>
<g>
    <use 
            xlink:href="#bit" 
            opacity="0.8"
            transform="rotate(0 50 50)">
            <animate 
                attributeName="opacity"
                values="1;0.2" 
                dur="2.4s" 
                repeatCount="indefinite"
                begin="0.0s" 
            />
        </use>
    </g>

There are 12 of these <use> tags, I omitted them here for brevity. in the animation tag, only the begin attribute changes each time, the rest is identical.

I tried various approaches that seemed reasonable to me, but none work, so I'm hoping some SVG guru here can point me in the right direction. Or am I basically forced to repeat all the animation attributes on each of the tags?

Knowing just a little about SVG, I realize that there are many ways to accomplish the same result.

Thanks.

--> Fiddle

Solution

  • I don't think you can do exactly what you are trying to do because begin is an attribute of the animation elements and not a property that can be inherited from a use.

    Depending on what you mean by "more efficient", there are other ways to achieve a similar effect. For example, you can use scripting:

    http://jsfiddle.net/rzAwV/1/

    This is a smaller file, but the animation is not as smooth because we are just rotating the spinner, rather than animating the opacity.