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，也可以等到9月Firefox 69发布。

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上的use元素

2 个答案: