Question

我想在这个SVG饼图中切出一个甜甜圈洞。这可以在不编辑每个切片的路径尺寸的情况下完成吗？像一个重叠的面具也许？

<svg>
    <path d="M 25 25 L 25 0 A 25 25 0 1 1 0.4428187317827863 29.68453286464311 Z" fill="#45c31b"></path>
    <path d="M 25 25 L 0.4428187317827863 29.68453286464311 A 25 25 0 0 1 24.999999999999996 0 Z" fill="green"></path>
</svg>

Fiddle

Answer 1

我不确定我是否完全理解这种效果，但如果您不想改变其他任何内容，为什么不在它上面放一个圆圈？...

<circle r="15" cx="25" cy="25" fill="white" />

jsfiddle

如果你需要让背景通过，那么你可以将它放在一个组中并使用一个掩码（或使用一些数学创建初始路径，使它已经没有中间部分）。

<svg>
    <defs>
    <mask id="circlemask" >
      <rect fill="white" width="100%" height="100%" />
      <circle r="15" cx="25" cy="25" fill="black"/>
    </mask>
  </defs>
    <rect x="0" y="0" width="100" height="100" fill="blue"/>
    <g mask="url(#circlemask)" >
      <path d="M 25 25 L 25 0 A 25 25 0 1 1 0.4428187317827863 29.68453286464311 Z" fill="#45c31b"></path>
      <path d="M 25 25 L 0.4428187317827863 29.68453286464311 A 25 25 0 0 1 24.999999999999996 0 Z" fill="green"></path>
    </g>  
</svg>

jsfiddle

我不是一个大晒太阳的粉丝，我可能更喜欢单独创建甜甜圈部分，所以根本不需要任何剪辑或面具，但如果你正在处理已经创建的东西，这可能会有效

SVG：饼图内的甜甜圈洞

1 个答案: