使分组的项目旋转答案

【问题标题】：make the grouped items spin使分组的项目旋转
【发布时间】：2020-01-11 23:16:23
【问题描述】：

我在摆弄 SVG。我有一个停车标志，我已经静态地旋转了它，但我想要一个动画旋转。我尝试了几种方法.. 但我希望能够只使用我制作的组并使其旋转。

我尝试过以不同方式嵌套 animateTransform。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SVG Sample - Transformations</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="html5.css">
    </head>
    <body>

        <svg width="500" height="300">
          <defs> 
              <g id="myGroup"> 
                <polygon points="50,5   100,5  125,30  125,80 100,105
                50,105  25,80  25, 30"
                style="stroke:#747373; fill:#cc3333; stroke-width: 3;"/>

                <text x=40 y=65 font-family="san-serif" 
                font-size="30px" fill="white">
                    STOP
            </text>
             </g>
         </defs>



            <use xlink:href="#myGroup" 
                transform="translate(0,0)"></use>

            <use xlink:href="#myGroup" 
                transform="translate(250, -20) rotate(90)"></use> 

                <use xlink:href="#myGroup" 
                transform="translate(150, 220) rotate(180)"></use> 


                <use xlink:href="#myGroup" 
                transform="translate(150, 150) "
                <animateTransform attributeName="transform"
                type="rotate"
                from="0 150 150"
                to="360 150 150"
                begin="0s"
                dur="1s"
                repeatCount="indefinite"
            />
                ></use> 

        </svg>
    </body>
</html>

【问题讨论】：

你打错了：你需要在<animateTransform>之前关闭<use>。即：<animateTransform>应该是动画元素的子元素。
ahaaaaaaaaaaaa 谢谢你。虽然现在它正在以宽弧而不是围绕指定坐标旋转。

标签： html svg polygon

【解决方案1】：

你需要让它围绕中心旋转：from="0 75 55" to="360 75 55" 并翻译整个东西：

<svg width="500" height="300">
          <defs> 
              <g id="myGroup"> 
                <polygon points="50,5   100,5  125,30  125,80 100,105
                50,105  25,80  25, 30"
                style="stroke:#747373; fill:#cc3333; stroke-width: 3;"/>

                <text x=40 y=65 font-family="san-serif" 
                font-size="30px" fill="white">
                    STOP
            </text>
             </g>
         </defs>



            <use xlink:href="#myGroup" 
                transform="translate(0,0)"></use>

            <use xlink:href="#myGroup" 
                transform="translate(250, -20) rotate(90)"></use> 

                <use xlink:href="#myGroup" 
                transform="translate(150, 220) rotate(180)"></use> 

                <g transform="translate(120,110)">
                <use xlink:href="#myGroup">
                <animateTransform attributeName="transform"
                type="rotate"
                from="0 75 55"
                to="360 75 55"
                begin="0s"
                dur="1s"
                repeatCount="indefinite"
            />
                </use> 
                </g>

        </svg>

【讨论】：