Question

我创建了一个svg，它是一条弧，其路径上有虚线圆。

这是我的svg文件。

<!DOCTYPE html>
<html>
 <body>
   <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
     <path d="M52 90 Q 95 35 138 90" fill="transparent"/>
        <!-- Smallest one -->
        <circle cx="53" cy="93" r="2" fill="#601e1c"/>
        <circle cx="137" cy="93" r="2" fill="#601e1c"/>

        <circle cx="57" cy="84" r="3" fill="#601e1c"/>
        <circle cx="133" cy="84" r="3" fill="#601e1c"/>

        <circle cx="65" cy="75" r="4" fill="#601e1c"/>
        <circle cx="125" cy="75" r="4" fill="#601e1c"/>

        <circle cx="77" cy="66" r="5" fill="#601e1c"/>
        <circle cx="111" cy="66" r="5" fill="#601e1c"/>

        <!-- Center circle -->
        <circle cx="95" cy="62" r="6" fill="#601e1c"/>
    </svg>
 </body>
</html>

Run the code snippet

如何旋转svg并创建一个像这样的文件？

svg expected after rotation along with the original svg

Answer 1

我不太确定这是否是您所需要的。请看一下。我将所有代码都放在一个组中，并与<use>再使用三次，

svg{border:1px solid}
circle{fill:#601e1c}

<svg width="190" height="190" viewBox ="0 15 190 190" xmlns="http://www.w3.org/2000/svg">
<g id="arc">     
        <!-- Smallest one -->
        <circle cx="53" cy="93" r="2"/>
        <circle cx="137" cy="93" r="2"/>

        <circle cx="57" cy="84" r="3"/>
        <circle cx="133" cy="84" r="3"/>

        <circle cx="65" cy="75" r="4"/>
        <circle cx="125" cy="75" r="4"/>

        <circle cx="77" cy="66" r="5" />
        <circle cx="111" cy="66" r="5" />

        <!-- Center circle -->
        <circle cx="95" cy="62" r="6" />
  </g>
  

  <use xlink:href="#arc" transform="rotate(-90,95,110) translate(-5,10)"/>
    <use xlink:href="#arc" transform="rotate(-180,95,110) translate(0,-10)"/>
     <use xlink:href="#arc" transform="rotate(90,95,110) translate(5,10)"/>
    </svg>

Answer 2

这可以使用svg transform来实现。

在下面的代码段中，旋转的圆弧的圆已分组到g元素中，并对其应用了rotate变换。还必须使用translate，以便基于圆弧的中心进行旋转。

更多信息可以在这篇文章中找到：Transforms on SVG Elements。

<!DOCTYPE html>
<html>
 <body>
   <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
     <path d="M52 90 Q 95 35 138 90" fill="transparent"/>
      <!-- original arc -->

        <!-- Smallest one -->
        <circle cx="53" cy="93" r="2" fill="#601e1c"/>
        <circle cx="137" cy="93" r="2" fill="#601e1c"/>

        <circle cx="57" cy="84" r="3" fill="#601e1c"/>
        <circle cx="133" cy="84" r="3" fill="#601e1c"/>

        <circle cx="65" cy="75" r="4" fill="#601e1c"/>
        <circle cx="125" cy="75" r="4" fill="#601e1c"/>

        <circle cx="77" cy="66" r="5" fill="#601e1c"/>
        <circle cx="111" cy="66" r="5" fill="#601e1c"/>

        <!-- Center circle -->
        <circle cx="95" cy="62" r="6" fill="#601e1c"/>
        
      <!-- rotated arc -->
        <g transform="translate(65,121)rotate(-90)translate(-95,-62)">
        
        <!-- Smallest one -->
        <circle cx="53" cy="93" r="2" fill="#red"/>
        <circle cx="137" cy="93" r="2" fill="#red"/>

        <circle cx="57" cy="84" r="3" fill="#601e1c"/>
        <circle cx="133" cy="84" r="3" fill="#601e1c"/>

        <circle cx="65" cy="75" r="4" fill="#601e1c"/>
        <circle cx="125" cy="75" r="4" fill="#601e1c"/>

        <circle cx="77" cy="66" r="5" fill="#601e1c"/>
        <circle cx="111" cy="66" r="5" fill="#601e1c"/>

        <!-- Center circle -->
        <circle cx="95" cy="62" r="6" fill="#601e1c"/>
        </g>
    </svg>
 </body>
</html>

如何旋转现有的svg来创建另外三个相似的弧？

2 个答案: