2

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

我有一个<path>通过包装<g>父母应用的多个面具，如下所示：

在此处输入图像描述

这是不可见遮罩的最终图形：

在此处输入图像描述

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中测试的那样，当鼠标悬停在原始路径上时，样式会发生变化，掩码不会被计算在内。此外，我认为独立路径在更复杂的需求中提供了更大的灵活性，并且在添加更多掩码时性能更高。

4

0 回答 0