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

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 设置 元素上的 lines-dashoffset 值。

在我的示例中，每个饼图的中间也是透明的，正如您从石灰绿色页面背景中看到的那样。路径上的旋转变换是为了让笔画从 12 点钟开始。