Дано: четыре файла svg
с одинаковой структурой. В каждой svg
есть 4 path
. Отличаются они только атрибутами d и transform
.
Проблема: В атрибуте transform
, в нем повторяется дважды translate:
transform="translate(2004.586538, 563.741494) rotate(26.000000) translate(-2004.586538, -563.741494)
Как такое анимировать?
Мои пробы:
<animate xlink:href="#p1" attributeName="d" attributeType="XML"
values = "M841.586538,-88.7585061 L3167.58654,-88.7585061 L3167.58654,1216.24149 L1141.58654,1216.24149 C975.901113,1216.24149 841.586538,1081.92692 841.586538,916.241494 L841.586538,-88.7585061 Z; M957.745625,-1216.57773 L3283.74563,-1216.57773 L3283.74563,88.4222735 L1257.74563,88.4222735 C1092.0602,88.4222735 957.745625,-45.8923016 957.745625,-211.577727 L957.745625,-1216.57773 Z"
dur="10s"
repeatCount="indefinite"
fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="translate" values="2004.586538, 563.741494; 2120.745625, -564.077727" repeatCount="indefinite" dur="4s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" values="26.000000; -22.000000" repeatCount="indefinite" dur="4s" fill="freeze" additive="sum"/>