0

I have many <rect> inside a <g> tag in my SVG.

And the <g> group is under a circle mask.

The result looks like this:

enter image description here

However, I would like to know, whether one <rect> is inside mask or not, for example:

This rect is inside the mask:

inside mask

This rect is outside the mask:

outside mask

This rect is half inside, half outside.

half

I want to assign different styles to them according to there masking status. For example:

For the shapes inside the mask, I want to add class .inside to them. For the shapes outside the mask, I want to add class .outside to them. For the shapes half inside the mask, I want to add class .half to them.

Currently, I can only calculate by using coordinate functions but what if the mask is not a circle?

Is there any way I can achieve this?

AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
  • 1
    Not in a mask. But you can test whether a point is inside a path. See https://stackoverflow.com/questions/20788604/recognize-pointx-y-is-inside-svg-path-or-outside – Paul LeBeau Jun 21 '21 at 14:04
  • Sounds inspiring! Thanks Paul – AGamePlayer Jun 21 '21 at 22:20
  • After doing some research, I found `isPointInFill` is not perfect: 1, it doesn't work on `clipPath` shapes; 2, it doesn't work on shapes with `transform:rotate`. – AGamePlayer Jun 21 '21 at 23:17

0 Answers0