Mouse Enter event on irregular shapes

Saola Animate Support Questions
1

Problem:

Saola Animate version: 2.7.1.

OS: Windows 10 Home.

I have an irregular shape on my screen. As soon as the mouse cursor enters into the shape, a text must be shown inside the shape. However, the text sometimes appears also when the mouse is not yet entered into the shape. I guess it is because the Mouse Enter event which I am using in this case, does not take into account the irregular boundaries of the shape, but just its bounding rectangle.

Since I want to use this method for a linguistic map having several irregular-shaped geographic areas touching each other, I need a more accurate method to detect the boundaries of each areas. Do you think isPointInPath() method is the the best choice for this purpose? Any suggestion on how to use it in this case?

Thanks In Advance
Tony

2

Try using the following class settings on your irregular SVGs:

.irregular{
pointer-events:none!important;
}

.irregular > svg > path{
pointer-events:visiblepainted!important;
}
1 Like
3

Thank you mackavi,

I tried your method but I was unable to make it work. Surely I am doing something wrong.
I will study it a little bit more and let you know.

Tony

4

Hi Tony,

Do you use freeform shapes?
If so, the second CSS selector in @mackavi’s answer should be .irregular > svg > :first-child.
If you don’t know where to set the class and CSS, you can see this topic: Events of transparent areas

Regards

6

Thank you Toan Le,

I would prefer to do all my map drawings with Inkscape and importing them into SA.

In the case of a freeform shape drawn inside SA, the text inside the shape is correctly shown when the mouse cursor enters into the boundaries of the shape, even if it flickers a little bit when the mouse cursor passes over the text area.

On the contrary, in the case of an imported SVG (be it Inkscape or Plain SVG, it seems it does not make any difference), I cannot understand why the text does not appear at all even if I followed your indications. I have attached my Saola file for your information. test_area.zip (10.3 KB)

7

Hi Tony,

The above CSS only works for Saola Animate shapes and freeforms. It doesn’t work with imported SVG images.
You can use Curve tool (Elements > Shape > Curve) in Saola Animate to draw a custom curve so that it works with the above CSS. For more information about creating and editing a curve, please see this tutorial: https://atomisystems.com/html5-animation/drawing-vector-graphics/

Regards

8

Hi Toan Le,

Sorry, I completely misunderstood. I thought it was possible to do it also with an imported SVG image.
If there is no other choice, I will try to draw all the shapes in Saola Animate instead of using Inkscape.
Thank you for your support.

9

Hi Tony,

I’m afraid that there’s no better choice for you.

You can set irregular class for the text element to prevent flickering.

Regards

10

Hi Toan Le,

Yes, you are all right! Now, it does not flicker anymore. It is exactly the effect I was looking for. Thank you again.