SVG smil 拒绝旋转组

Question

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

由于 Starburst 的碎片形状超过了 SVG 视图框，这基本上掩盖了它，我想知道这种溢出是否会以某种方式禁用它的动画？

其次： 星爆图案横跨整个屏幕，所以我将旋转轴作为屏幕的中心，但实际上这是错误的，星爆的中心在视图框中明显偏离中心。我假设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>