SVG中带孔洞多边形的生成方法咨询

嗨，我来帮你梳理下SVG里给多边形添加孔洞的实用方法，先说说你现在的示例问题：你贴的代码里是两个独立的<polygon>元素，所以它们会各自被填充，自然出不了孔洞效果，得用下面这些方法把它们关联起来才行～

• 方法一：用单个<path>结合填充规则（最推荐）
  SVG的<path>可以把外部轮廓和内部孔洞的路径写在一起，通过fill-rule属性控制填充区域，常用的有两种规则：

  • fill-rule="evenodd"：奇偶规则，不管路径绘制方向，图形区域被路径穿过奇数次就填充，偶数次就留空，非常适合做孔洞。
  • fill-rule="nonzero"：非零环绕规则，靠路径的绘制方向（顺时针/逆时针）来决定填充，外部轮廓用顺时针，内部孔洞用逆时针，就能让内部区域变成孔洞。

  举个简单的例子，把外部大矩形和内部小矩形做成带孔洞的图形：

  <svg width="100" height="100">
    <path d="M10,10 L90,10 L90,90 L10,90 Z M20,20 L80,20 L80,80 L20,80 Z" 
          fill="black" fill-opacity=".1" stroke="grey" 
          fill-rule="evenodd" />
  </svg>
  

  这里的Z是闭合路径的指令，先画外部大框，再画内部小框，用evenodd规则就自动留出孔洞了。

• 方法二：嵌套多边形+填充规则
  如果你想保留<polygon>元素，可以把外部轮廓和内部孔洞的多边形放在同一个<g>组里，给组设置fill-rule属性，这样组内的多个图形会被当作一个复合图形处理：

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
       viewBox="2.529975092957109 41.346880553423844 23.168975806780242 22.134355770447257"
       stroke-width="0.00250">
    <g fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002"
       stroke-linecap="square" stroke-linejoin="miter" fill-rule="evenodd">
      <!-- 这里替换成你的外部大多边形的points -->
      <polygon points="..."/>
      <!-- 你的内部孔洞多边形 -->
      <polygon points="12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749" />
    </g>
  </svg>
  

  注意要确保内部多边形完全在外部多边形内部，不然孔洞效果会出问题哦。

• 小提示
  如果你用nonzero规则，记得调整内部多边形的点顺序：外部是顺时针排列的话，内部就改成逆时针，这样内部区域会被“抵消”成孔洞，效果和evenodd一样，但evenodd更省心，不用管方向～

备注：内容来源于stack exchange，提问作者pcace