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。此外，由于您要转换的组已经具有转换属性，因此我将该组包装在另一个组中，我正在旋转这个组。

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>

SVG smil拒绝旋转组

SVG smil refuses to rotate group

svg

smil

css-animations