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

时间:2016-11-12 13:29:01

标签: svg vector-graphics svg-path

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

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

enter image description here

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

enter image description here

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中进行测试一样,当鼠标悬停原始路径时,样式会发生变化,因此不会对蒙版进行计数。 此外,我认为拥有独立路径可以在更复杂的需求中提供更大的灵活性,并且在添加更多掩码时更具性能。

0 个答案:

没有答案