以动态内容为背景图像的SVG

我知道SVG中的标记主要用于事件，但我需要它是为了避免重复代码，如以下情况：

<script>
    var i=0,c1=0xf80,c2=0xf40,X,n=8; while(n) {
        X=document.createElementNS("http://www.w3.org/2000/svg","text");
        X.setAttribute("x",65-i); X.setAttribute("y",80+i); X.setAttribute("class","txt");
        X.setAttribute("fill","#"+(c1.toString(16))); X.innerHTML="e";
        document.rootElement.appendChild(X);
        X=document.createElementNS("http://www.w3.org/2000/svg","text");
        X.setAttribute("x",90-i); X.setAttribute("y",86+i); X.setAttribute("class","txt");
        X.setAttribute("fill","#"+(c2.toString(16))); X.innerHTML="f"; 
        document.rootElement.appendChild(X);
        n--; i++; c1+=16; c2+=16;
    }
</script>

变量i=0，c1=0xf80，c2=0xf40，X，n=8；while（n）{
X=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
X.setAttribute（“X”，65-i）；X.setAttribute（“y”，80+i）；X.setAttribute（“class”，“txt”）；
X.setAttribute（“fill”、“#”+（c1.toString（16））；X.innerHTML=“e”；
document.rootElement.appendChild（X）；
X=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
X.setAttribute（“X”，90-i）；X.setAttribute（“y”，86+i）；X.setAttribute（“class”，“txt”）；
X.setAttribute（“fill”、“#”+（c2.toString（16））；X.innerHTML=“f”；
document.rootElement.appendChild（X）；
n--；i++；c1+=16；c2+=16；
}

但是，如果我想使用SVG作为背景图像，由于某种原因，标记不会执行，导致我将上面的代码更改为如下愚蠢的代码：

<text x="65" y="80" class="txt" fill="#f80">e</text>
<text x="90" y="86" class="txt" fill="#f40">f</text>
<text x="64" y="81" class="txt" fill="#f90">e</text>
<text x="89" y="87" class="txt" fill="#f50">f</text>
<text x="63" y="82" class="txt" fill="#fa0">e</text>
<text x="88" y="88" class="txt" fill="#f60">f</text>
<text x="62" y="83" class="txt" fill="#fb0">e</text>
<text x="87" y="89" class="txt" fill="#f70">f</text>
<text x="61" y="84" class="txt" fill="#fc0">e</text>
<text x="86" y="90" class="txt" fill="#f80">f</text>
<text x="60" y="85" class="txt" fill="#fd0">e</text>
<text x="85" y="91" class="txt" fill="#f90">f</text>
<text x="59" y="86" class="txt" fill="#fe0">e</text>
<text x="84" y="92" class="txt" fill="#fa0">f</text>
<text x="58" y="87" class="txt" fill="#ff0">e</text>
<text x="83" y="93" class="txt" fill="#fb0">f</text>

e
F
E
F
E
F
E
F
E
F
E
F
E
F
E
F

每个人都可以看到上面的代码是多么愚蠢的重复。。。 就为了一个相当简单的任务，我真的怀疑没有更好的方法来完成它。 想象一下更复杂的情况，我将需要用成千上万的线来结束这一切，

如果有人知道处理重复对象的方法（或者更好地执行“循环”任务），请在这里告诉我

---

提前非常感谢。：

SVG不会运行脚本，如果您将其显示为图像，即通过背景图像。我看到了这一点，但有任何其他方法（或其他脚本方法）可以实现将SVG制作为图像的复杂形状吗？您可以创建一个数据URI，然后将其用作图像。