SVG 渐变“饼图”答案

【问题标题】：SVG Gradient "Pie Slice"SVG 渐变“饼图”
【发布时间】：2014-08-10 01:26:46
【问题描述】：

是否可以仅使用渐变在形状的角落进行着色？下面是我正在尝试做的事情的图像，但必须使用圆圈和路径。我知道使用路径可能是一种更好的方法，但我很好奇它是否可以通过渐变来完成。

谢谢。

【问题讨论】：

标签： javascript html graphics svg gradient

【解决方案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>

【讨论】：

注意：如果是半圆形填充，可以在我的other example使用渐变

【解决方案2】：

不是单一的渐变。没有。

【讨论】：