隨機顏色的svg筆劃

Question

所以我試圖在網站上創建一個功能，客戶端可以上傳一組簡單的.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'); 

，然後修改使用的東西它的顏色像

$('.bgImg').css({"stroke":"black"}); 

（雖然我想我會創建CSS的第二陣列顏色變量）

雖然問題是我卡住了，因爲你不能修改.svg的CSS，如果它沒有內嵌svg，除非你使用。在html中調用svg文件，然後在.svg文件中，您可以調用外部樣式表並通過此樣式表修改其css屬性。事情是我不知道是否和外部樣式表甚至會幫助，因爲我正在使用jQuery而不是HTML和CSS。所以我想知道如果有人可能有任何想法。

，這是有助於瞭解和SVG工作，放眼文章的底部： http://css-tricks.com/using-svg/

Answer 1

如果你可以加載SVG文件作爲XML文本，可以更改行程通過路徑或圖形屬性字符串操作。

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>"); 

：

一旦你有你的修改SVG XML字符串，你可以使用數據URI像這樣應用該SVG作爲背景圖片