2

Is there a way to generate new, stand alone path out of a path with multiple masks applied to it?

I have a <path> with multiple masks applied via wrapping <g> parents, like so:

enter image description here

Here is the final graphic without masks visible:

enter image description here

DEMO on CodePen

Source code:

<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>

Here is why I'm asking: I need to apply different styles to myShape on mouse hovering it's visible part only. Currently, as you can test in DEMO, styles are changed when mouse hovers the original path, masks are not taken into count. Besides, I think having stand-alone path provides more flexibility in more complex requirements and also is more performant when more masks are being added.

Sergey Lukin
  • 471
  • 2
  • 17

0 Answers0