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