SVG анимация внутри элемента use не работает в firefox - PullRequest
Новая
       46

SVG анимация внутри элемента use не работает в firefox

0 голосов
/ 18 октября 2019

Я пытаюсь создать SVG с анимацией внутри элемента <use />: 

 <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.

В этодемо анимация левого элемента не работает в Firefox и работает в Chrome. Правый элемент такой же, как левый, но без <use ... /> и работает так, как задумано в обоих браузерах.

В этом этом потоке Джеймс Ньютон отметил, что

CSS анимация внутри элементов не работает в Firefox

Есть ли способ повторно использовать части SVG в сложных SVG с анимацией внутри, и это будет работать в Firefox?

Если это невозможно, есть ли надежда, что в будущем он будет работать в Firefox так же, как сейчас в Chrome?

...