CODEWITHSUNDEEP
animationsvg
user3102556
user3102556

Reputation: 79

svg animation on an animated path

I have a piece of svg code that links an animation to a simple path and that works well :

<path id="p0" d="M 110,150 C 300,80 400,300 450,100  500,-100 -90,220 110,150" 
stroke="black" fill="none" stroke-width="1" />
<ellipse  rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze" 
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</animateMotion>
</ellipse>

Now I need to have the same animation on an animated path. I tried the following :

<path id = "p0" stroke = "black" stroke-width = "1" fill = "none" >
<animate attributeName="d" dur="2s" repeatCount="indefinite" values=
"M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 400 100 200;
M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 100 100 200;
M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 400 100 200" />
</path>
<ellipse  rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze" 
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</ellipse>

But to no avail : the ellipse doesn't follow the path and remains invisible...

Any idea ? Is it at least possible ?

Thanks in advance.

EDIT : I just noticed that it works on Firefox, but the problem is that it links the ellipse to the first part of the path values only; in other words it doesn't follow the path animation... :(

Upvotes: 0

Views: 102

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

If you give the path a valid d attribute, it seems to work in Chrome.

<svg width="500" height="500">
  <path id = "p0" stroke = "black" stroke-width = "1" fill = "none"
        d="M 100 200 C 100 150 250 150 100 100 C 0 50 100 400 100 200">
    <animate attributeName="d" dur="2s" repeatCount="indefinite" values=
"M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 400 100 200;
M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 100 100 200;
M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 400 100 200" />
  </path>
  <ellipse  rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
    <animateMotion id="One" dur="10s" fill="freeze" 
rotate="auto" repeatCount="indefinite" >
      <mpath xlink:href="#p0"/>
    </animateMotion>
  </ellipse>
</svg>

Upvotes: 1

Related Questions