在SVG文字内换行

Question

我需要将文本包装在某个区域内，或者至少使其在跨越边界时隐藏，例如在隐藏的溢出div中。

<g id="7ea290078b8f111c040a43c9a7e2607b-textcontent">
  <circle cx="50%" cy="50%" r="25%" fill="none"></circle>
  <text x="50%" y="50%" text-anchor="middle" alignment-baseline="baseline" font-stretch="ultra-condensed" style="white-space: normal" font-family="Arial" font-size="14" fill="#000000">YOUR LOGO YOUR LOGO</text>
  <text x="50%" y="54%" text-anchor="middle" alignment-baseline="hanging" font-stretch="ultra-condensed" style="white-space: normal" font-family="Arial" font-size="14" fill="#000000">HERE</text>
</g>

例如上面的文本：

text over the margins example

我尝试给和设置一个有限的宽度，并且还设置了溢出：隐藏，但是它不起作用。有什么建议么？首选没有javascript。