Every instance of <use xlink:href...> animates? - animation

Question

I'm using the "use xlink:ref" tag to render a polyline that's defined in the "defs" tag and animate it. I want to also use xlink:ref to render the same polyline, but without the animation, i.e., as just a static object. But all three instances of the "use xlink:ref" that I render animate, even though there's no animation associated with two of them!? How can I have only one of the three instances of it animate? I don't understand why SVG thinks I want the other 2 instances to animate. Thanks for any help!
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="600" viewBox="0 0 600 600">
<defs>
<marker id="mCircle" markerWidth="160" markerHeight="160" refX="80" refY="80" markerUnits="userSpaceOnUse">
<circle cx="80" cy="80" r="70" style="fill: red; stroke: black; stroke-width: 5px; opacity:0.2"/>
</marker>
<marker id="mMid" markerWidth="100" markerHeight="100" refX="50" refY="50" markerUnits="userSpaceOnUse" >
<circle cx="50" cy="50" r="6" style="fill: black; stroke: none; stroke-width:4px; opacity:1"/>
</marker>
<path d="M 0,0 60,0 120,0 180,0 240,0 300,0 360,0" id="linered" style="marker-start: url(#mCircle); marker-end: url(#mCircle); marker-mid: url(#mMid); stroke-width: 12; fill:none; stroke-linejoin:round; stroke-linecap:round; stroke-opacity: 0.6"/>
</defs>
<use xlink:href="#linered" transform="translate(120, 280)" style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:orange;"/>
<animate
xlink:href="#linered"
attributename="d"
dur="2s"
begin="1s;"
values= "M 0 0, 60 0, 120 0, 180 0, 240 0, 300 0, 360 0;
M 180 0, 60 40, 120 -30, 180 60, 240 220, 300 60, 180 0;
M 180 0, 60 -33, 120 60, 180 -90, 240 70, 300 0, 180 0;
M 180 0, 60 40, 120 -30, 180 60, 240 220, 300 60, 180 0;
M 0 0, 60 0, 120 0, 180 0, 240 0, 300 0, 360 0;"
keySplines= "0 0.8 0.3 1; 0 0.8 0.3 1; 0 0.8 0.3 1; 0 0.8 0.3 1;"
keyTimes= "0; 0.33; 0.5; 0.66; 1"
calcMode="spline"
repeatcount="4"
/>
<g transform="translate(300 280)">
<use id="static1" xlink:href="#linered" x="-180" y="0" transform="rotate(60)" style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:blue;"/>
<use id="static2" xlink:href="#linered" x="-180" y="0" transform="rotate(120)" style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:white;"/>
</g>
</svg>

Answer 1

First, there are a few errors in your code concerning upper case letters in attributes. While Chrome seems to be a bit more forgiving (as defined in SVG v2), other browsers still adhere to SVG v1.1, which is fully XML-compliant in this regard. So you should always use case-sensitive markerUnits, attributeName and repeatCount attributes.
Your main problem is what you are animating:
<animate xlink:href="#linered" attributeName="d" ... />
Your animation references the <path id="linered" /> element, which is the template from which each <use> is derived. Each of them copies the whole template, including its animation.
Please note that your <animate> tag is a sibling to the <use> tag it is positioned next to. Both are self-closing tags, and there is no connection between those two exept their placement in the source code next to each other - but that is incitental.
The connection between an element and its animation can only be established in two ways.
an <animate> element is the child of the animated element (do not use the xlink:href attribute for this syntax):
<path ...>
<animate ... />
</path>
an <animate> element, positioned anywhere in the same svg fragment, references the animated element:
<path id="target"... />
<!-- other content -->
<animate xlink:href="#target" ... />
If you want to animate one <use> element, but not the others, you need to animate that element. For example you could animate a transform attribute set on the <use> element. But the d attribute you want to animate is part of the referenced <path> element.
The <use> element is no stand-in for what it is referencing, but conceptually a container that hides a copy of its reference inside (in what is called a Shadow DOM). This copy cannot be referenced with a url, or a CSS selector. It cannot be animated individually.
The only solution is to write down the element to be animated seperately (note the id):
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="600" viewBox="0 0 600 600">
<defs>
<marker id="mCircle" markerWidth="160" markerHeight="160" refX="80" refY="80" markerUnits="userSpaceOnUse">
<circle cx="80" cy="80" r="70" style="fill: red; stroke: black; stroke-width: 5px; opacity:0.2"/>
</marker>
<marker id="mMid" markerWidth="100" markerHeight="100" refX="50" refY="50" markerUnits="userSpaceOnUse" >
<circle cx="50" cy="50" r="6" style="fill: black; stroke: none; stroke-width:4px; opacity:1"/>
</marker>
<path id="linered" d="M 0,0 60,0 120,0 180,0 240,0 300,0 360,0" style="marker-start: url(#mCircle); marker-end: url(#mCircle); marker-mid: url(#mMid); stroke-width: 12; fill:none; stroke-linejoin:round; stroke-linecap:round; stroke-opacity: 0.6"/>
</defs>
<path id="linered-animated" transform="translate(120, 280)" d="M 0,0 60,0 120,0 180,0 240,0 300,0 360,0" style="marker-start: url(#mCircle); marker-end: url(#mCircle); marker-mid: url(#mMid); stroke-width: 12; fill:none; stroke-linejoin:round; stroke-linecap:round; stroke-opacity: 0.6;stroke-dasharray:222; stroke-dashoffset:-70px; stroke:orange;"/>
<animate
xlink:href="#linered-animated"
attributeName="d"
dur="2s"
begin="1s;"
values= "M 0 0, 60 0, 120 0, 180 0, 240 0, 300 0, 360 0;
M 180 0, 60 40, 120 -30, 180 60, 240 220, 300 60, 180 0;
M 180 0, 60 -33, 120 60, 180 -90, 240 70, 300 0, 180 0;
M 180 0, 60 40, 120 -30, 180 60, 240 220, 300 60, 180 0;
M 0 0, 60 0, 120 0, 180 0, 240 0, 300 0, 360 0;"
keySplines="0 0.8 0.3 1; 0 0.8 0.3 1; 0 0.8 0.3 1; 0 0.8 0.3 1;"
keyTimes= "0; 0.33; 0.5; 0.66; 1"
calcMode="spline"
repeatCount="4"
/>
<g transform="translate(300 280)">
<use id="static1" xlink:href="#linered" x="-180" y="0" transform="rotate(60)" style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:blue;"/>
<use id="static2" xlink:href="#linered" x="-180" y="0" transform="rotate(120)" style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:white;"/>
</g>
</svg>
As a footnote only, it seems that the xlink:href attribute in an <animate> element has a bug in Firefox where the animation is never applied to a referencing <use> element.