How to generate path out of masked SVG path? - svg

Question

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:
Here is the final graphic without masks visible:
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.