SVG 填充效果

填充效果

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 0,190 100,190" fill="lime" />
  <rect width="150" height="100" x="120" y="50" fill="blue" />
  <circle r="45" cx="350" cy="100" fill="red" />
  <text x="420" y="100" fill="red">I love SVG!</text>
</svg>

使用 fill-opacity 实现带透明度的填充效果

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 0,190 100,190" fill="lime" fill-opacity="0.5" />
  <rect width="150" height="100" x="120" y="50" fill="blue" fill-opacity="50%" />
  <circle r="45" cx="350" cy="100" fill="red" fill-opacity="0.6" />
  <text x="420" y="100" fill="red" fill-opacity="70%">I love SVG!</text>
</svg>

使用 fill-rule="evenodd" 指定填充规则

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="evenodd" />
</svg>

使用 fill-rule="nonzero" 指定填充规则

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="nonzero" />
</svg>