[Python] SVG element not visible in streamlit

Below is my code with a circle inside svg element which i want to render through jinja2 using st.html in streamlit the issue is the continer is visible but svg element is not visible. it is blank. see below code.


<style>
html,body {
height: 100%;
background-color: #404040;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

.container {
display: flex;
width: 500px;
/* Extended width for pipe */
height: 500px;
border: 3px solid #EEEEEE;
justify-content: center;
align-items: center;
border-radius: 20px;

}

.drawing {
position: relative;
width: 2000px;
/* Extended width for pipe */
height: 600px;
}

.circle-svg {
width: 100%;
height: 100%;
}

.c3 {
fill: none;
stroke: grey;
stroke-width: 10;
}

</style>

<body>
<div class="container">
<div class="drawing">
<svg viewBox="0 0 500 500" class="circle-svg">
<!-- Circle -->
<circle class="c3" cx="250" cy="250" r="198"></circle>
</svg>
</div>
</div>
</body>

python code:

def cutting_dimention(html_content):
# Directly use the HTML content without treating it as a file path
template = Template(html_content)
rendered_html = template.render() # Render the HTML with Jinja2
st.text(rendered_html) # Display rendered HTML text
st.html(rendered_html) # Display rendered HTML as an HTML block in Streamlit

Call the function with the HTML content


cutting_dimention(my_circle)

Continue reading...