如何从掩盖的SVG路径生成路径？

Question

有没有办法从应用了多个蒙版的路径中生成新的独立路径？

我有<path>通过包装<g>父母应用了多个蒙版，如下所示：

这是没有可见面具的最终图形：

DEMO on CodePen

源代码：

<svg>
  <defs>
    <mask id="primMask">
      <path d="M 0 0 L 300 0 300 300 0 300 Z
               M 100 0 A 50,50 0 0,0 100,100 A 50,50 0 0,0 100,0" fill-rule="evenodd" fill="white" />
    </mask>
    <mask id="anotherMask">
      <path d="M 0 0 L 300 0 300 300 0 300 Z
                 M 30 0 A 10,10 0 0,0 30,60 A 10,10 0 0,0 30,0" fill-rule="evenodd" fill="white" />
    </mask>
  </defs>

  <!-- These are just the circles with same paths
       as masks to help visualize the masks shape/position -->
  <g>
    <path d="M 100 0 A 50,50 0 0,0 100,100 A 50,50 0 0,0 100,0" class="maskCopy" />
    <path d="M 30 0 A 10,10 0 0,0 30,60 A 10,10 0 0,0 30,0" class="maskCopy" />
  </g>

  <!-- This is the main shape with masks -->
  <g mask="url(#primMask)">
    <g mask="url(#anotherMask)">
      <path d="M 10 10 L 90 10 70 90 10 90 Z" class="myShape" />
    </g>
  </g>

</svg>

这就是为什么我要问：我需要在鼠标悬停它的可见部分时将不同的样式应用于myShape。目前，正如您可以在DEMO中进行测试一样，当鼠标悬停原始路径时，样式会发生变化，因此不会对蒙版进行计数。 此外，我认为拥有独立路径可以在更复杂的需求中提供更大的灵活性，并且在添加更多掩码时更具性能。