Well this is puzzling, I've extracted the code from the larger SVG document, I have a starburst pattern, that I'm trying to rotate on mouseover, but I can't get it to rotate in the simplest scenario.
Since the shard shapes of the Starburst exceed the SVG viewbox, which essentially masks it, I'm wondering if this overspill somehow disables it animating?
Secondly: The starburst pattern stretches across the full screen, so I've put the rotation axis as the center of the screen, but in reality this is wrong, the center of the starburst is significantly off center in the viewbox. I presume that SVG numerical values are all pixels? I can just get the pixel co-ordinates of the starburst origin and use that for my rotation point?
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg98"
version="1.1"
viewBox="0 0 203.20051 203.19937"
height="768"
width="768">
<path
style="stroke-width:1.03538"
inkscape:connector-curvature="0"
id="path2"
d="m -173.45154,-87.209606 h 508.187 V 219.1202 h -508.187 z"
fill="#f3b321" />
<g
transform="translate(1.6824406,23.526394)"
id="starburstGroup"
fill="#facf47">
<path
inkscape:connector-curvature="0"
id="path4"
d="M 77.726,243.157 H 18.102 L 47.914,52.72 Z M 176.639,212.265 121.723,243.971 47.914,52.72 Z M 351.802,169.996 301.424,257.255 47.914,52.719 Z M 334.954,7.784 v 89.87 L 47.914,52.719 Z M 310.645,-159.258 362.857,-68.825 47.914,52.718 Z m -183.092,5.618 59.254,34.21 L 47.914,52.717 Z M 20.744,-120.837 H 75.083 L 47.913,52.718 Z" />
<path
inkscape:connector-curvature="0"
id="path6"
d="m -90.807,-119.217 59.18,-34.168 79.54,206.103 z m -124.479,70.361 43.634,-75.575 L 47.913,52.72 Z" />
<path
inkscape:connector-curvature="0"
id="path8"
d="M -178.514,88.165 V 17.273 L 47.913,52.719 Z m 7.232,141.405 -43.56,-75.448 L 47.914,52.72 Z" />
<path
inkscape:connector-curvature="0"
id="path10"
d="M -26.02,244.297 -81.03,212.537 47.913,52.72 Z" />
</g>
<animate
id = "starburstRotation"
xlink:href="#starburstGroup"
attributeName="transform"
type="rotate"
from="0 101.5 101.5"
to="360 101.5 101.5"
dur="4s"
repeatCount="indefinite"
/>
</svg>
The most important change is using animateTransform
instead of animate
. Also since the group you want to transform already has a transform attribute, I've wrapped the group in another group and I'm rotating this one instead.
body{margin:0;padding:0}
<svg
viewBox="0 0 203.20051 203.19937">
<g id="starburstGroup">
<g
transform="translate(1.6824406,23.526394)"
fill="#facf47">
<path
style="stroke-width:1.03538"
id="path2"
d="m -173.45154,-87.209606 h 508.187 V 219.1202 h -508.187 z"
fill="#f3b321" />
<path
id="path4"
d="M 77.726,243.157 H 18.102 L 47.914,52.72 Z M 176.639,212.265 121.723,243.971 47.914,52.72 Z M 351.802,169.996 301.424,257.255 47.914,52.719 Z M 334.954,7.784 v 89.87 L 47.914,52.719 Z M 310.645,-159.258 362.857,-68.825 47.914,52.718 Z m -183.092,5.618 59.254,34.21 L 47.914,52.717 Z M 20.744,-120.837 H 75.083 L 47.913,52.718 Z" />
<path
id="path6"
d="m -90.807,-119.217 59.18,-34.168 79.54,206.103 z m -124.479,70.361 43.634,-75.575 L 47.913,52.72 Z" />
<path
id="path8"
d="M -178.514,88.165 V 17.273 L 47.913,52.719 Z m 7.232,141.405 -43.56,-75.448 L 47.914,52.72 Z" />
<path
id="path10"
d="M -26.02,244.297 -81.03,212.537 47.913,52.72 Z" />
</g>
</g>
<animateTransform
id = "starburstRotation"
xlink:href="#starburstGroup"
attributeName="transform"
type="rotate"
from="0 101.5 101.5"
to="360 101.5 101.5"
dur="4s"
repeatCount="indefinite"
/>
</svg>