SVG Gradient“Pie Slice”

Question

是否可以仅使用渐变在形状的角落遮挡？ 下面是我想要做的图像，但必须使用圆圈和路径。 我知道使用路径可能是一种更好的方法，但我很好奇是否可以用渐变来完成。

谢谢。

Answer 1

路径不是唯一的方法。有时一个5岁的孩子可以用基本的形状超越我： -

<svg class="sheet" xmlns="http://www.w3.org/2000/svg" 
  xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">

  <pattern id="my_pattern" patternUnits="userSpaceOnUse"
             width="200" height="200" viewbox="0 0 200 200">
  <rect x="0" y="0" fill="#33ff33" width="200" height="200" />
  <rect x="50" y="0" fill="red" width="50" height="50" />
  </pattern>
  <circle cx="50" cy="50" r="40" style="stroke:black; stroke-width: 2; 
   fill: URL(#my_pattern)"/>
</svg>

Answer 2

不使用单一渐变。否。