首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >随机化svg笔划的颜色

随机化svg笔划的颜色
EN

Stack Overflow用户
提问于 2013-10-16 01:23:33
回答 1查看 408关注 0票数 0

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

我想知道这是否可能。我尝试做的是通过jquery调用.svg文件,比如

代码语言:javascript
运行
复制
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');

然后使用下面的命令修改它的颜色

代码语言:javascript
运行
复制
$('.bgImg').css({"stroke":"black"}); 

(尽管我猜我会创建第二个css颜色变量数组)

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

这对理解和svg的工作方式很有帮助,请看本文的底部:http://css-tricks.com/using-svg/

EN

回答 1

Stack Overflow用户

发布于 2013-10-16 01:41:27

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

一旦有了修改后的svg xml字符串,就可以使用如下的数据uri将该svg作为背景图像应用:

代码语言:javascript
运行
复制
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>");
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19387265

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档