我正在尝试使SVG标签在段落内联。
标签可以按照我的要求在段落中内联,而SVG则会占据自己的一行。
出现了这种情况:
我的文本在这里
[SVG图像]
我的文本在这里继续。
这是我想要的:
我的文本在这里 [SVG图像] 我的文本在这里继续。
此JSFiddle演示了问题:https://jsfiddle.net/aorsten/pq6zsmh0/9/
<p class="text-justify">
I am writing a text here, and letting it go on for a few lines. <img src="https://i.postimg.cc/gncBZvLn/block2.png" alt="hi"> I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines.
I am writing a text here, and letting it go on for a few lines.
<a href="#">
<svg viewBox="0 0 314325 314325" preserveAspectRatio="xMidYMid meet" class="svg">
<g transform="translate(0 0)scale(0.16019417475728157 0.16019417475728157)rotate(0 157162.5 157162.5)translate(0 0)">
<g transform="translate(0 0)rotate(0 981075 981075)">
<image href="https://i.postimg.cc/hJmCBs63/groupgrid.png" width="1962150" height="1962150" preserveAspectRatio="none">
</image>
</g>
<g transform="translate(1133475 990600)rotate(0 73025 73025)">
<image href="https://i.postimg.cc/gncBZvLn/block2.png" width="146050" height="146050" preserveAspectRatio="none">
</image>
</g>
</g>
</svg>
</a> I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines.
</p>
.text-justify {
text-align: justify !important;
}
img {
max-height: 1.5em;
}
.svg {
max-height: 1.5em;
display: inline-block;
position: relative;
vertical-align: bottom;
}