Как сместить анимацию в элементе SVG Pattern? - PullRequest
Новая
       28

Как сместить анимацию в элементе SVG Pattern?

0 голосов
/ 08 июля 2019

У меня есть повторяющийся шаблон в качестве заливки некоторой геометрии в моем SVG-документе.Я хотел бы анимировать рисунок с течением времени, но хотел бы, чтобы разные экземпляры повторяющейся фигуры анимировались в разное время.

Это мой svg: 

<svg width="1768px" height="1283px" viewBox="0 0 1768 1283">
  <defs>
     <pattern id="diamonds" viewBox="0 0 16 20" width="16px" height="20px" patternUnits="userSpaceOnUse">
       <rect width="16px" height="20px" fill="rgba(30%,30%,30%,1)"></rect>
       <path d="M8 0v20L0 10M16 0v10L8 0M16 10v10H8" fill="rgba(86%,81%,9%,0.03)"></path>
     </pattern>
  </defs>

  <path d="M 0 0 L 607.8977258786044 0 L 560.2905919266584 81.00215987261595 L 129.4125551595978 263.88004884359384 L 0 264.36867738165284 Z" 
    fill="url(#diamonds)" stroke="rgba(86%,81%,9%,1)" stroke-width="2px"></path>
</svg>

Мне бы хотелось, чтобы каждый изалмазы медленно превращаются в золото, а затем постепенно превращаются в серые, но не все сразу.

(Примечание: на самом деле существует множество path элементов, которые заполнены шаблоном, так что просто создаются экземпляры тысяч SVGэлементы для анимации скорее всего будут бездействующими). ​​

...