Question

我需要制作如here所示的圈子扇区，但是我想定义扇区svg一次，然后在路径中使用不同的d值重复它。像

这样的东西

<svg>
   <defs id="circle>
      <g>
         <circle cx="115" cy="115" r="110"></circle>
         <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
         <circle cx="115" cy="115" r="50"></circle>
      </g>
   </defs
</svg>

<svg>
    <use d="M115,115 L115,5 A110,110 1 0,1 115,125 A110,110 1 0,1 35,190 z" xlink:href = "#circle/>
</svg>
<svg>
     <use d="M115,115 L115,5 A110,110 1 0,1 115,225 A110,110 1 0,1 35,190 z" xlink:href = "#circle/>
</svg>

有可能吗？谢谢！

Answer 1

你不能那样做，但如果你愿意考虑其他选择，可以获得类似的视觉效果：

<svg class="pie">
    <defs>
        <g id="pie">
            <circle cx="115" cy="115" r="80" stroke-dasharray="none"/>
            <path id="p" transform="rotate(90, 115, 115)" d="
                M 115, 115
                m -80, 0
                a 80,80 0 1,0 160,0
                a 80,80 0 1,0 -160,0
                " />
        </g>
    </defs>
    <use xlink:href="#pie" stroke-dashoffset="52"/>
</svg>
<svg class="pie">
    <use xlink:href="#pie" stroke-dashoffset="125.5"/>
</svg>
<svg class="pie">
    <use xlink:href="#pie" stroke-dashoffset="300"/>
</svg>

请参阅fiddle或this page。您还可以使用CSS在＆lt; use＆gt;上设置stroke-dashoffset值。元件。

在我的示例中，每个饼图在中间也是透明的，您可以从浅绿色页面背景中看到。路径上的旋转变换用于使笔画的开始在12点开始。

Answer 2

没有。那是不可能的。如果路径不同，那么你并没有真正重用它们。

如果您有两次相同的扇形角度，只是圆圈中的不同位置，您可以重复使用不同旋转的第一个。但那就像你将要获得的那样接近。

重用具有不同路径值的SVG元素

2 个答案: