SVG< use>上的动画不适用于FireFox&苹果浏览器 [英] Animation on SVG <use> does not work in FireFox & Safari

问题描述

我有一个过渡动画，我想在group元素内的SVG元素的宽度上触发.该动画似乎只能在Chrome浏览器上运行.

I have a transition animation I want to trigger on the width of an SVG element inside a group element. The animation only seems to work on the Chrome browser.

<!-- works -->
<svg width="400" height="100">
  <rect id="rect-1" width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

<!-- only works in Chrome -->
<svg width="400" height="400">
  <defs>
    <g id="my-rect">
      <rect id="rect-2" width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    </g>
  </defs>

  <use xlink:href="#my-rect" y="0"/>
  <use xlink:href="#my-rect" y="110"/>
</svg>

.grow {
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 3s;
  width: 10px;
}

(() => {
  setTimeout(() => {
    const rect1 = document.getElementById('rect-1');
    rect1.classList.add('grow');

    const rect2 = document.getElementById('rect-2');
    rect2.classList.add('grow');
  }, 1000);
})();

要复制，请在Safari或Firefox中打开 fiddle .您将看到第二个矩形的过渡无法正常工作.

To reproduce open this fiddle in Safari or Firefox. You will see that the transition of the second rectangle does not work properly.

是否有任何变通方法来使SVG组中特定元素的过渡动画正常工作?

Is there any workaround to get the transition animation working for a specific element inside the SVG group?

推荐答案

总结一下，一种解决方法是退回到SMIL SVG动画而不使用CSS.

Summarising, a workaround is to fall back to SMIL SVG animations instead of using CSS.

请参阅我的原始问题改编的小提琴.

See the adapted fiddle to my original question.

<svg width="400" height="100">
  <rect id="rect-1" width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

<svg width="400" height="400">
  <defs>
    <g id="my-rect">
      <rect id="g-rect" width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
    </g>
  </defs>

  <use xlink:href="#my-rect" y="0"/>
  <use xlink:href="#my-rect" y="110"/>
</svg>

(() => {
  setTimeout(() => {
    const rect1 = document.getElementById('rect-1');
    rect1.classList.add('grow');

    const groupRect = document.getElementById('g-rect');

    const growAnimation = document.createElementNS('http://www.w3.org/2000/svg', 'animate')
    growAnimation.setAttribute('attributeName', 'width');
    growAnimation.setAttribute('from', '400');
    growAnimation.setAttribute('to', '10');
    growAnimation.setAttribute('dur', '3s');
    growAnimation.setAttribute('fill', 'freeze');
    growAnimation.setAttribute('begin', 'indefinite');
    groupRect.appendChild(growAnimation);

    growAnimation.beginElement();
  }, 1000);
})();

这篇关于SVG< use>上的动画不适用于FireFox&苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！