SVG中clipPath多polygon元素呈XOR效果，如何实现AND效果？

要让ClipPath里的多个Polygon实现AND（交集）效果（只保留所有Polygon共同覆盖的区域），不能直接把多个Polygon堆在同一个ClipPath里（默认是并集效果），得用嵌套ClipPath的方式来做，具体步骤很简单：

1. 把每个Polygon单独做成一个独立的ClipPath
2. 在最终的ClipPath里，用<use>引用第一个ClipPath，再给这个<use>套上第二个ClipPath的裁剪，这样就得到了两个区域的交集

修改后的代码如下：

<img src="https://i.sstatic.net/iZ7xG.jpg" style="clip-path: url(#myClip);">

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 第一个裁剪区域：左侧洞以外的所有区域 -->
    <clipPath id="clipLeft" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0 1, .54 .99, .5682 .156, .746 .151, .7397 .557, .51 .508, .54 .99, 1 1, 1 0" />
    </clipPath>
    <!-- 第二个裁剪区域：右侧洞以外的所有区域 -->
    <clipPath id="clipRight" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0 1, .737 1, .747 .321, .816 .321, .81 .666, .74 .645, .74 1, 1 1, 1 0" />
    </clipPath>
    <!-- 最终裁剪：取两个区域的交集，也就是同时在两个裁剪区域内的部分 -->
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <use href="#clipLeft" clip-path="url(#clipRight)" />
    </clipPath>
  </defs>
</svg>

为什么要这么做？因为SVG里单个<clipPath>下的多个元素，默认是取它们的并集——只要区域在任意一个元素内部就会被显示。而嵌套ClipPath相当于给第一个裁剪结果再做一次裁剪，最终剩下的就是两个区域的交集，刚好满足你的需求。这种方法还能扩展到更多个ClipPath的交集，只要逐层嵌套就行。

内容的提问来源于stack exchange，提问作者user3014233