SMIL 动画不适用于 Firefox 上的使用元素

Question

尽管此动画在 Chrome、Safary 和 Opera 上有效，但当我使用组时它在 Firefox 上不起作用：

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>

Answer 1

这是 fixed very recently。您可以同时使用 Nightly，也可以等到 Firefox 69 9 月发布。

Answer 2

为了让它工作，我将使用的路径和动画圆放在一个组中，然后旋转该组：

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>

SMIL 动画不适用于 Firefox 上的使用元素

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

firefox

svg

smil