I'm creating a SVG editor.

I have a simple selection tool that appears when I click and move my mouse from a blank area in my SVG.

My SVG is populated with rectangles that can have a rotation applied to.

• I have the X and Y position applied to a translate function.
• Width and height are easy to calculate based on a scale factor and original dimensions of my rectangle(s).
• My rotation angle is applied in a rotate function

I know about the point in polygon algorithm but I don't know how to calculate the points of my (rotated) rectangles.

My question is how can I verify if my selection area is over one ore more of these rectangles and if the PIP algorithm is the best, how can I calculate the points of my rectangle(s)?

Here is the kind of render I'm trying to have:

I'm creating an SVG editor.

I have a simple selection tool that appears when I click and move my mouse from a blank area in my SVG.

My SVG is populated with rectangles that can have a rotation applied to.

• I have the X and Y position applied to a translate function.
• Width and height are easy to calculate based on a scale factor and original dimensions of my rectangle(s).
• My rotation angle is applied in a rotate function

I know about the point in polygon algorithm but I don't know how to calculate the points of my (rotated) rectangles.

My question is how can I verify if my selection area is over one or more of these rectangles and if the PIP algorithm is the best, how can I calculate the points of my rectangle(s)?

Here is the kind of render I'm trying to have:

I'm creating a SVG editor.

I have a simple selection tool that appears when I click and move my mouse from a blank area in my SVG.

My SVG is populated with rectangles that can have a rotation applied to.

My question is how can I verify if my selection area is over one ore more of these rectangles?

Here is the kind of render I'm trying to have:

I'm creating a SVG editor.

I have a simple selection tool that appears when I click and move my mouse from a blank area in my SVG.

My SVG is populated with rectangles that can have a rotation applied to.

• I have the X and Y position applied to a translate function.
• Width and height are easy to calculate based on a scale factor and original dimensions of my rectangle(s).
• My rotation angle is applied in a rotate function

I know about the point in polygon algorithm but I don't know how to calculate the points of my (rotated) rectangles.

My question is how can I verify if my selection area is over one ore more of these rectangles and if the PIP algorithm is the best, how can I calculate the points of my rectangle(s)?

Here is the kind of render I'm trying to have: