SVGでspanを並べたときのような動きを実現するには？

Question

前提・実現したいこと

SVGで背景に文字を永遠に書いていくような背景を作りたいです

発生している問題・エラーメッセージ

text要素を複数配置したときにどのような工夫をすればインライン要素を並べたときのような横並び+折り返しが実現できるかがわかりません

該当のソースコード

まずこのようなソースを書きました
これは左上にSVG!という文字列を作りました。

body {
  background: no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='red' font-size='20'>SVG!</text></svg>") no-repeat;
}

しかし、テキスト要素を増やすと重なってしまい

body {
  background: no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='red' font-size='20'>SVG!</text><text x='0' y='15' fill='red' font-size='20'>SVG!</text></svg>");
}

下のようにspan要素を複数置いたときのような動きが実現できませんでした
また、上の方法ではテキストの横幅などがpxで指定されていますがテキストが多いとはみ出して見えなくなってしまいます
これについても、svg要素のwidthを100%にしてみましたが、要素が重なるだけで改善しませんでした

<span>SVG!</span><span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span><span>SVG!</span>
<span>テキストテキスト</span>

どのようにすれば、上のようなspan要素と同じインラインの動きをSVGで実現できますか？

参考
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_08.htm
http://wisdom.sakura.ne.jp/web/xml/svg/svg4.html

Answer 1

こういう感じってことでしょうか？

SVGのtextはwrapしないようです。xml - Auto line-wrapping in SVG text - Stack Overflow

cromeで試してますがtextareaとかforeignObjectは動かず（サポートしていない為かは未確認）、
pathで実現してます。

そんなにSVGに詳しいわけではないので違っていたらごめんなさい。

文字サイズもデカイし、いいサンプルではないですが…

<svg viewBox="0, 0, 200, 200" style="background: #eee">
 <defs>
  <path id="path" d="M10,30 H200 M10,60 H200 M10,90 H200 M10,120 H200"></path>
 </defs>
 <use xlink:href="#path" x="0" y="35" stroke="blue" stroke-width="1" />
 <text transform="translate(0,35)" fill="red" font-size="10">
  <textPath xlink:href="#path">This is a long long long text ......2This is a long long long text ......3This is a long long long text ......4This is a long long long text ......</textPath>
 </text>
</svg>

Comments

[ura2]

やっぱり出来ないですよね･･･
「XMLベースならできるかも？」と思いましたが、HTMLのような自動レイアウトは不可能なんですね
回答頂いた内容をもとにがんばって見ましたが、すべてのオブジェクトにサイズを指定しないといけない点があり、どうしても思ったような動作にならないので画像を作成してそれをbackgroundimageとすることにしました
回答ありがとうございました！