SVG中的HTML [英] HTML inside SVG
本文介绍了SVG中的HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在SVG绘图中添加一些HTML标记.
I would like to add some HTML markup in an SVG drawing.
据我所知，SVG无法做到这一点.
As far as I know, this is not possible with SVG.
图像在浏览器中显示.
是否可以在SVG上方绘制HTML?
由于我想使用HTML的CSS/table功能，因此SVG <text>元素还不够.
Since I want to use the CSS/table features of HTML the SVG <text> element is not enough.
推荐答案
您去了！
.wrapper{
position: relative;
width: 100px;
height: 100px;
}
.text{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
color: white;
}
<html>
<body>
<div class="wrapper">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="blue" />
</svg>
<div class="text">
TEXT
</div>
</div>
</body>
</html>
这篇关于SVG中的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
