Question

以下是我的代码中的示例：

<div style="width:100%;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 200">
        <svg class="a">
            <g>
                <path class="area1" d="M52,5   A50,50 0 0,1 80,17" style="stroke-width:10; fill:none;" stroke="gray"/>
                <path class="area2" d="M83,20  A50,50 0 0,1 94.5,48" style="stroke-width:10; fill:none; stroke: gray;"/>                    
                <path class="area3" d="M94,52  A50,50 0 0,1 84,80" style="stroke-width:10; fill:none; stroke: gray;"/>
                <path class="area4" d="M80,83  A50,50 0 0,1 52,95" style="stroke-width:10; fill:none; stroke: gray; "/>
                <path class="area5" d="M48,95  A50,50 0 0,1 20,83" style="stroke-width:10; fill:none;" stroke="gray"/>
                <path class="area6" d="M17,80  A50,50 0 0,1 5,52" style="stroke-width:10; fill:none;" stroke="gray"/>
                <path class="area7" d="M5,48  A50,50 0 0,1 17,20" style="stroke-width:10; fill:none;" stroke="gray"/>
                <path class="area8" d="M20,17  A50,50 0 0,1 48,5" style="stroke-width:10; fill:none;" stroke="gray"/>
            </g>
        </svg>
        <svg x="80" y="80">
          <g>
            <path class="area1" d="M52,5   A50,50 0 0,1 80,17" style="stroke-width:10; fill:none;" stroke="gray"/>
            <path class="area2" d="M83,20  A50,50 0 0,1 94.5,48" style="stroke-width:10; fill:none; stroke: gray;"/>                    
            <path class="area3" d="M94,52  A50,50 0 0,1 84,80" style="stroke-width:10; fill:none; stroke: gray;"/>
                            <path class="area4" d="M80,83  A50,50 0 0,1 52,95" style="stroke-width:10; fill:none; stroke: gray; "/>
            <path class="area5" d="M48,95  A50,50 0 0,1 20,83" style="stroke-width:10; fill:none;" stroke="gray"/>
            <path class="area6" d="M17,80  A50,50 0 0,1 5,52" style="stroke-width:10; fill:none;" stroke="gray"/>
            <path class="area7" d="M5,48  A50,50 0 0,1 17,20" style="stroke-width:10; fill:none;" stroke="gray"/>
            <path class="area8" d="M20,17  A50,50 0 0,1 48,5" style="stroke-width:10; fill:none;" stroke="gray"/>
         </g>
        </svg>
    </svg>
</div>

和css：

.a {
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: 6;
    -webkit-animation-timing-function: linear; 
    -webkit-animation-name: ckw;
}

我正在尝试让孩子svg旋转，但它不起作用。如果我在父svg上放置相同的类，它会旋转但不是我想要的方式。任何帮助都会很感激。

提前致谢。

Answer 1

首先..我会清理代码;）然后将animateTransform添加到您要旋转的circle。

干杯！

.circle {
  stroke: gray;
  stroke-width: 10;
  stroke-dasharray: 10;
  fill: transparent;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 200">
  
  <circle class="circle" cx="40" cy="40" r="35">
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="6s"
      type="rotate"
      from="0 40 40"
      to="360 40 40"
      repeatCount="indefinite"
    />
  </circle>
  
  <circle class="circle" cx="100" cy="100" r="35"/>
  
</svg>

使内部SVG旋转

1 个答案: