SVG smil拒绝轮转组

Question

这很令人费解，我从更大的SVG文档中提取了代码，我有一个星暴模式，我试图在鼠标悬停时旋转，但我无法让它在最简单的情况下旋转。

由于星暴的碎片形状超过了SVG viewbox，这实际上掩盖了它，我想知道这个溢出是否以某种方式禁用了它的动画？

其次:星暴模式在整个屏幕上延伸，所以我将旋转轴设置为屏幕的中心，但实际上这是错误的，星暴的中心在viewbox中明显偏离中心。我假设SVG数值都是像素？我可以只获得星暴原点的像素坐标，并将其用于我的旋转点？

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

Answer 1

最重要的变化是用animateTransform代替了animate。另外，由于您想要转换的组已经有了transform属性，所以我将该组包装在另一个组中，并轮换这个组。

​

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>

​