SMIL анимация не работает на элементе использования в Firefox - PullRequest
Новая
       27

SMIL анимация не работает на элементе использования в Firefox

1 голос
/ 20 июня 2019

Хотя эта анимация работает в 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>

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Чтобы заставить это работать, я помещаю использованный путь и анимированный круг в группу и вращаю группу: 

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>
1 голос
/ 20 июня 2019

Это было исправлено совсем недавно . Тем временем вы можете использовать Nightly или просто подождать до релиза Firefox 69 в сентябре.

...