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