How to make paths of a single or multiple SVG's clickable?

tomtomooohm · November 4, 2024, 4:43pm

Godot Version

4.3

Question

I’d like to make each square of this svg

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M 0 0 H 200 V 200 H 0 Z" fill="#ff0000"/>
    <path d="M 200 0 H 400 V 200 H 200 Z" fill="#00ff00"/>
    <path d="M 0 200 H 200 V 400 H 0 Z" fill="#0000ff"/>
    <path d="M 200 200 H 400 V 400 H 200 Z" fill="#ffff00"/>
</svg>

clickable. I tried it with Polygon2D and CollisionPolygon2D, as the future paths will contain several points.

Nothing has worked so far. Do you know a way to make the areas of a single or multiple SVG’s clickable?

renevanderark · August 21, 2025, 7:20am

You can use Geometry2D (Geometry2D — Godot Engine (stable) documentation in English) for this, using get_global_mouse_position or get_local_mouse_position on your node when you detect a click using Input or _unhandled_input method.

An example from my plugin Scalable Vector Shapes 2D:

github.com/Teaching-myself-Godot/ez-curved-lines-2d

addons/curved_lines_2d/scalable_vector_shape_2d.gd

2.11.5


      
          		return Rect2(Vector2.ZERO, Vector2.ZERO)
          	return Geometry2DUtil.get_polygon_bounding_rect(points)
          
          
          func has_point(global_pos : Vector2) -> bool:
          	return get_bounding_rect().grow(
          		line.width / 2.0 if is_instance_valid(line) else 0
          	).has_point(to_local(global_pos))
          
          
          func has_fine_point(global_pos : Vector2) -> bool:
          	var poly_points := self.tessellate()
          	return Geometry2D.is_point_in_polygon(to_local(global_pos), poly_points)
          
          
          func clipped_polygon_has_point(global_pos : Vector2) -> bool:
          	if not has_point(global_pos) or not has_fine_point(global_pos):
          		return false
          
          	if cached_clipped_polygons.is_empty():
          		cached_clipped_polygons = _apply_polygon_operations_on_clip_paths(

Would you like to try the plugin? It ships an svg to Polygon2D importer as well

On github: GitHub - Teaching-myself-Godot/ez-curved-lines-2d

Youtube:

A-Z Explainer: https://youtu.be/_QOnMRrlIMk
Some updates: https://youtu.be/pP0CYEvU2uQ