在“使用”元素内的SVG动画在Firefox中不起作用

时间:2019-10-17 21:39:23

标签: animation firefox svg smil

我正在尝试在<use />元素内创建带有动画的SVG:

 <svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    height="100"
    width="100"
  >
    <defs>
      <path id="id1_clipper" d="M 0 0 L 100 10 V0 Z">
        <animate
          id="id1_animate"
          attributeName="d"
          from="M 0 0 L 100 10 V0 Z"
          to="M 0 0 L 100 100 V0 Z"
          begin="indefinite"
          end="indefinite"
          dur="2s"
          fill="freeze"
        />
      </path>

      <clipPath id="id1_clipPath">
        <use xlink:href="#id1_clipper" />
      </clipPath>
    </defs>

    <rect
      top="0"
      left="0"
      width="100"
      height="100"
      fill="#999999"
      clip-path="url(#id1_clipPath)"
    />
  </svg>

但是动画不能在Firefox中播放。

this demo中,左元素的动画在Firefox中无效,在chrome中有效。右元素与左元素相同,但没有<use ... />,并且在两种浏览器中都可以正常工作。

James Newton在此this主题中指出

  

元素中的CSS动画在Firefox中实际上不起作用

有没有办法在复杂的SVG中重用带有动画的SVG的某些部分,并且可以在Firefox中使用?

如果不可能,将来是否有希望像现在在chrome中那样在Firefox中工作?

0 个答案:

没有答案