Search code examples
svgcss-animationssmil

SVG smil refuses to rotate group


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>

Solution

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