CODEWITHSUNDEEP
firefoxsvgsmil
enxaneta
enxaneta

Reputation: 33024

SMIL animation doesn't work on a use element on Firefox

Although this animation is working on Chrome, Safary and Opera, it doesn't work on Firefox when I'm using the group:

svg {
  max-width: 90vh;
  stroke-linecap: round;
  display:block;
  position:absolute;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
}
path {
  stroke: black;
  stroke-width: 0.2;
  fill: none;
}
circle {
  fill: black;
  
}
<svg id="svg" viewBox="-50 -50 100 100">
<g id="slice">
  <path d="M8.390747629378028, 4.0407710911278985Q16.337096335644915,1.578047643071413 28.72564510652592,5.067456639486153Q41.114193877406926,8.556865635900893 22.230907302700192,4.260374440788638Q3.3476207279934576,-0.03611675432361651 21.46226478304126,-6.962030472005244Q39.57690883808906,-13.887944189686872 31.396381359458864,-2.1315394650039874Q23.215853880828664,9.624865259678897 22.336451060888443,2.1742972246208847Q21.457048240948225, -5.276270810437127, 8.390747629378028, -4.0407710911278985" id="theCurve"></path>
  <circle r="1">
  <animateMotion begin="0s" dur="10s" repeatCount="indefinite">
    <mpath xlink:href="#theCurve"></mpath>  
  </animateMotion>
  </circle>
  </g>
  
  <use xlink:href="#slice" transform="rotate(200)"></use>
  
</svg>

Upvotes: 1

Views: 85

Answers (2)

Robert Longson
Robert Longson

Reputation: 123995

This was fixed in Firefox 69.

Upvotes: 1

enxaneta
enxaneta

Reputation: 33024

In order to make it work I'm putting the used path and the animated circle in a group and I'm rotating the group:

svg {
border:1px solid;
  max-width: 90vh;
  stroke-linecap: round;
  display:block;
  position:absolute;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
}
path {
  stroke: black;
  stroke-width: 0.2;
  fill: none;
}
circle {
  fill: black; 
}
<svg id="svg" viewBox="-50 -50 100 100">  
<defs>
  <path d="M8.390747629378028, 4.0407710911278985Q16.337096335644915,1.578047643071413 28.72564510652592,5.067456639486153Q41.114193877406926,8.556865635900893 22.230907302700192,4.260374440788638Q3.3476207279934576,-0.03611675432361651 21.46226478304126,-6.962030472005244Q39.57690883808906,-13.887944189686872 31.396381359458864,-2.1315394650039874Q23.215853880828664,9.624865259678897 22.336451060888443,2.1742972246208847Q21.457048240948225, -5.276270810437127, 8.390747629378028, -4.0407710911278985" id="theCurve"></path>
</defs>
  
  <g transform="rotate(0)">
  <use xlink:href="#theCurve" ></use>
  <circle r="1">
  <animateMotion begin="0s" dur="10s" repeatCount="indefinite">
    <mpath xlink:href="#theCurve"></mpath>  
  </animateMotion>
  </circle>
  </g>
  
  <g transform="rotate(200)">
  <use xlink:href="#theCurve" ></use>
  <circle r="1">
  <animateMotion begin="0s" dur="10s" repeatCount="indefinite">
    <mpath xlink:href="#theCurve"></mpath>  
  </animateMotion>
  </circle>
  </g>
</svg>

Upvotes: 1

Related Questions