テキストを追加するときにsvgの要素サイズを維持する

私はかなり新しく、一部の図面をテキストと組み合わせたり、もっと描画したりしようとしています。セクションを含む円を描き、それぞれの中心にテキストを表示します。しかし、私のビューポートにはテキストのための十分なスペースがありません。なぜなら、サークルを最初に描くからです.SVGの幅を大きくすると&の高さになります。私は線とテキストを描くスペースが必要です。どのように私は円のサイズ（300,300）を保つことができ、スペースを持っていることを私に提案してください。おかげテキストを追加するときにsvgの要素サイズを維持する

<svg width="300" height="300" viewBox="0 0 300 300"> 
     <g transform="translate(150,150)" fill="none" stroke-width="45"> 
     <path stroke="#CBA135" d="M-110 0 A110 110 0 0 10-110"/> 
     <path stroke="#7EC34F" d="M0 -110 A110 110 0 0 1110 0"/> 
     <path stroke="#ABDB92" d="M110 0 A110 110 0 0 1-110 0"/> 
     </g> 
     <g transform="translate(150,150)" fill="none" stroke-width="2"> 
     <path stroke="#fff" d="M0 -137 L0,-82"/> 
     <path stroke="#fff" d="M-137 0 L-82,0"/> 
     <path stroke="#fff" d="M137 0 L82,0"/> 
     <path stroke="#333" d="M117 -99 L137,-119"/> 
     <path stroke="#333" d="M0 147 L0,167"/> 
     <path stroke="#333" d="M-117 -99 L-137,-119"/> 
     <text x="-169" y="-140" font-family="sans-serif" font-size="18px" 
     fill="#438736">WORD1 WORD2</text>

Here's link to my codepen

出典

2017-06-29 Yoona