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