Tenho uma página NiceGUI com uma imagem SVG composta por dois elementos (um círculo e um quadrado). Preciso verificar qual elemento dessa imagem foi clicado quando a imagem SVG foi clicada, para que eu possa lidar com isso.
Quero que o evento "círculo clicado" seja acionado quando o círculo for clicado, e o evento "quadrado clicado" seja acionado quando o quadrado for clicado. Estou tentando implementar isso por meio de um manipulador, mas não sei o que escrever na função do manipulador. Estou anexando o código.
Meu método 1:
from nicegui import ui
def my_handler(event_args):
print("Button clicked!")
with ui.row():
svg_element = ui.html('''
<svg width="200" height="200" style="border: 1px solid black;">
<circle cx="50" cy="50" r="40" fill="red" class="clickable-circle"/>
<rect x="100" y="10" width="80" height="80" fill="blue" class="clickable-square"/>
</svg>
''')
svg_element.on('click', js_handler='(click) => { console.log(event.target.clickable-circle); }')
ui.run(port = 8082)
Meu método 2:
from nicegui import ui
def my_handler(event_args):
element = event_args.sender
# ???????
with ui.row():
svg_element = ui.html('''
<svg width="200" height="200" style="border: 1px solid black;">
<circle cx="50" cy="50" r="40" fill="red" class="clickable-circle"/>
<rect x="100" y="10" width="80" height="80" fill="blue" class="clickable-square"/>
</svg>
''')
svg_element.on('click', handler=my_handler)
ui.run(port=8082)
Obrigado a todos pela ajuda.