Adding an SVG image (and listen to events on the image)

[bouzidanas]

@susuhahnml

var nodes = Object.values(document.getElementsByClassName('node'));
        window.onload=function(){
            nodes.forEach(node=>{
                node.addEventListener("click", function() {
                    console.log("On click")
                    console.log(node)
                    node.style['opacity']='0.2'
                })

            })

        }

Hello

Fyi, st.write and st.markdown do not execute JavaScript. To execute JavaScript you can use the streamlit.components.v1.html function or a third party custom component like streamlit-javascript. Note that both of these work using iframes meaning that the code is executed inside an iframe and thus doesnt really have much access to whats outside of the iframe like all the other components in your Streamlit app.

Try this instead:

import streamlit as st
import base64
from streamlit.components.v1 import html

def render_svg(svg_string):
    """Renders the given svg string."""
    c = st.container()
    with c:
        html(svg_string)

render_svg(open("issue/default.svg").read())

Also, is there a reason your script is nested inside another script in your SVG code?