인라인 블록과 같은 svg 텍스트를 만드는 방법

차트 범례 만들기를 시도 중입니다.인라인 블록과 같은 svg 텍스트를 만드는 방법

<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)부터 시작됩니다. 인라인 블록 요소처럼 동작하도록하는 방법이 있습니까? 아니 '순수'SVG와

jsfiddle

출처

2014-09-12 kornieff