如何使svg文本像内联块

Question

尝试创建图表图例。

<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）开始。有没有办法让它们更像内联块元素？

jsfiddle

Answer 1

不是纯粹的＆＃39; SVG。 SVG没有像HTML这样的自动文本布局功能。它希望你自己定位每一段文字。

但是，如果您想要一段文字，并且只要您的SVG仅用于浏览器，您就可以使用<foreignObject>元素在您的SVG中嵌入HTML。

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