使分组的项目旋转

Question

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

我试过以不同的方式嵌套 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>

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

使分组的项目旋转

make the grouped items spin

html

svg

polygon