SVG：具有重叠形状的填充图案答案

【问题标题】：SVG: fill pattern with overlapping shapesSVG：具有重叠形状的填充图案
【发布时间】：2012-06-11 23:59:55
【问题描述】：

在 SVG 中，如何填充重叠形状的部分，例如 example（不是用 SVG 绘制的）？如果我从一个形状中省略填充图案，我还希望从它重叠的其他形状中删除该图案。之后，更多的形状可能会再次重叠并重新绘制图案。我从代码中生成这个 SVG，对于每个形状，我会在代码中知道它是应该添加还是减去填充图案。

到目前为止，这是我的 SVG。它绘制形状并定义填充图案但不使用它。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="640" height="480" viewBox="0 0 640 480">
<defs>
   <marker id="endArrowGreen" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="5" markerHeight="4">
   <polyline points="0,0 10,5 0,10 1,5" fill="#00CC00" stroke="#00CC00"/>
   </marker>
   <marker id="startArrowGreen" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="5" markerHeight="4">
     <polyline points="10,0 0,5 10,10 9,5" fill="#00CC00" stroke="#00CC00"/>
   </marker>
   <marker id="endArrowBlue" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="5" markerHeight="4">
   <polyline points="0,0 10,5 0,10 1,5" fill="#0000CC" stroke="#0000CC"/>
   </marker>
   <marker id="startArrowBlue" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="5" markerHeight="4">
   <polyline points="10,0 0,5 10,10 9,5" fill="#0000CC" stroke="#0000CC"/>
   </marker>
     <pattern id="Crosshatch" patternUnits="userSpaceOnUse"
              x="0" y="0" width="10" height="10"
              viewBox="0 0 10 10" >
       <path d="M 0 10 L 10 0" stroke-width="1" stroke="blue" />
     </pattern>
   </defs>
<g>
<line x1="7.78888" y1="6.08366" x2="319.087" y2="6.08366" stroke-width="1" stroke="#0000CC"  />
<polyline points="0,0 -6,-3 -5,0 -6,3" fill="#0000CC" stroke="#0000CC" transform="translate(319.087 6.08366) rotate(0)"/>
<line x1="319.087" y1="6.08366" x2="630.385" y2="6.08366" stroke-width="1" stroke="#0000CC"  />
<line x1="630.385" y1="6.08366" x2="630.385" y2="469.354" stroke-width="1" stroke="#0000CC"  />
<line x1="630.385" y1="469.354" x2="7.78888" y2="469.354" stroke-width="1" stroke="#0000CC"  />
<line x1="7.78888" y1="469.354" x2="7.78888" y2="237.719" stroke-width="1" stroke="#0000CC"  />
<line x1="7.78888" y1="6.08366" x2="7.78888" y2="237.719" stroke-width="1" stroke="#0000CC"  />
<polyline points="0,0 -6,-3 -5,0 -6,3" fill="#0000CC" stroke="#0000CC" transform="translate(7.78888 237.719) rotate(90)"/>
</g>
<circle cx="298.914" cy="237.087" r="218.732" stroke-width="1" stroke="#0000CC" fill="none"/>
<circle cx="262.395" cy="238.913" r="100" stroke-width="1" stroke="#0000CC" fill="none"/>
<circle cx="438.601" cy="236.175" r="129.523" stroke-width="1" stroke="#0000CC" fill="none"/>
<g>
<line x1="99.913" y1="248.646" x2="302.566" y2="248.646" stroke-width="1" stroke="#0000CC"  />
<polyline points="0,0 -6,-3 -5,0 -6,3" fill="#0000CC" stroke="#0000CC" transform="translate(302.566 248.646) rotate(0)"/>
<line x1="302.566" y1="248.646" x2="505.22" y2="248.646" stroke-width="1" stroke="#0000CC"  />
<line x1="505.22" y1="248.646" x2="505.22" y2="291.232" stroke-width="1" stroke="#0000CC"  />
<line x1="505.22" y1="291.232" x2="99.913" y2="291.232" stroke-width="1" stroke="#0000CC"  />
<line x1="99.913" y1="291.232" x2="99.913" y2="269.939" stroke-width="1" stroke="#0000CC"  />
<line x1="99.913" y1="248.646" x2="99.913" y2="269.939" stroke-width="1" stroke="#0000CC"  />
<polyline points="0,0 -6,-3 -5,0 -6,3" fill="#0000CC" stroke="#0000CC" transform="translate(99.913 269.939) rotate(90)"/>
</g>
<g>
<line x1="114.521" y1="181.118" x2="303.023" y2="181.118" stroke-width="1" stroke="#0000CC"  />
<polyline points="0,0 -6,-3 -5,0 -6,3" fill="#0000CC" stroke="#0000CC" transform="translate(303.023 181.118) rotate(0)"/>
<line x1="303.023" y1="181.118" x2="491.525" y2="181.118" stroke-width="1" stroke="#0000CC"  />
<line x1="491.525" y1="181.118" x2="491.525" y2="212.753" stroke-width="1" stroke="#0000CC"  />
<line x1="491.525" y1="212.753" x2="114.521" y2="212.753" stroke-width="1" stroke="#0000CC"  />
<line x1="114.521" y1="212.753" x2="114.521" y2="196.935" stroke-width="1" stroke="#0000CC"  />
<line x1="114.521" y1="181.118" x2="114.521" y2="196.935" stroke-width="1" stroke="#0000CC"  />
<polyline points="0,0 -6,-3 -5,0 -6,3" fill="#0000CC" stroke="#0000CC" transform="translate(114.521 196.935) rotate(90)"/>
</g>
</svg>

【问题讨论】：

标签： svg

【解决方案1】：

您可能想尝试“填充规则”属性，请参阅http://www.w3.org/TR/SVG/painting.html

【讨论】：