因此,我正在尝试在网站上创建一个功能,客户端可以上传一组简单的.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,除非你使用。在html中,您可以使用调用svg文件,然后在.svg文件中,您可以调用外部样式表,并通过此样式表修改其css属性。问题是,我不确定和外部样式表是否会有帮助,因为我使用的是jquery,而不是html和css。所以我想知道有没有人有什么想法。
这对理解和svg的工作方式很有帮助,请看本文的底部:http://css-tricks.com/using-svg/
发布于 2013-10-16 01:41:27
如果可以将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>");
https://stackoverflow.com/questions/19387265
复制相似问题