如何使svg文本像inline-block [英] How to make svg text like inline-block

问题描述

尝试创建图表图例。

<svg>
    <g class="legend">
        <g>
            <rect fill="blue" width="1em" height="1em" />
            <text>Bosnia and Herzegovina</text>
        </g>
        <g>
            <rect fill="red" width="1em" height="1em" />
            <text>Democratic Republic of the Congo</text>
        </g>
    </g>
</svg>

显然，每个项目从上一个开始（0,0）。有没有办法使它们更像行内块元素？

Obviously, each item starts at (0, 0) on top of previous one. Is there a way to make them behave more like inline-block elements?

jsfiddle

推荐答案

不使用'pure'SVG。 SVG没有自动文本布局功能，如HTML。它希望你自己定位每一段文字。

Not with 'pure' SVG. SVG doesn't have automatic text layout features like HTML. It expects you to position each piece of text yourself.

但是，如果你想有一段文字，只要你的SVG只会被使用在浏览器中，您可以使用< foreignObject> 元素在您的SVG中嵌入HTML。

However, if you want to have a paragraph of text, and as long as your SVG is only going to be used in a browser, you can embed HTML inside your SVG using the <foreignObject> element.

https://developer.mozilla.org/en-US/docs/Web/ SVG / Element / foreignObject

这篇关于如何使svg文本像inline-block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！