如何使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

不能与 '纯' SVG。 SVG没有像HTML这样的自动文本布局功能。它期望你自己定位每一段文字。但是，如果您想要有一段文字，并且只要您的SVG仅用于浏览器，则可以使用<foreignObject>元素将HTML嵌入到SVG中。

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