Jquery svg笔划颜色随机化

所以我尝试在一个网站上创建一个特性，客户端可以上传一组简单的.svg图像，并声明一组笔划颜色。然后，图像将以图像和笔画颜色的随机组合出现在他的网站背景中

我想知道这是否可能。我试图通过jquery调用.svg文件，如

var images = ['01', '02', '03', '04', '05', '06', '07', '08'];
$('<img class="bgImg" src="../../static/images/backgroundImage-' + images[Math.floor(Math.random() * images.length)] + '.svg">').appendTo('#border');

（尽管我想我会创建第二个css颜色变量数组）

但问题是，我被卡住了，因为如果.svg不是内联svg，除非您使用。在html中使用调用svg文件，然后在.svg文件中可以调用外部样式表并通过此样式表修改其css属性。问题是我不确定外部样式表是否会有帮助，因为我是用jquery而不是html和css来完成的。所以我想知道是否有人有什么想法

这有助于理解和svg的工作原理，请参阅本文的底部：

---

如果可以将svg文件作为xml文本加载，则可以通过字符串操作更改路径或形状上的笔划属性

一旦修改了svg xml字符串，就可以使用如下数据uri将该svg应用为背景图像：

body { background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>");

body{背景图像：
url（“数据：image/svg+xml；utf8，”）；

body { background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>");