下面是我的代码,其中 svg 元素内有一个圆圈,我想通过 jinja2 使用 streamlit 中的 st.html 来渲染它,问题是容器可见,但 svg 元素不可见。它是空白的。请参阅下面的代码。
<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代码:
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
使用 HTML 内容调用该函数
切割尺寸(我的圆)