0

所以我试图在一个网站上创建一个功能，客户端可以上传一组简单的 .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 除非你使用 .svg ，否则你不能修改它的 css。在 html 中，您可以使用 调用 svg 文件，然后在 .svg 文件中，您可以调用外部样式表并通过此样式表修改其 css 属性。问题是我不确定外部样式表是否会有所帮助，因为我使用的是 jquery 而不是 html 和 css。所以我想知道是否有人可能有任何想法。

这有助于理解 svg 的工作原理，请看文章底部： http ://css-tricks.com/using-svg/

4

1 回答 1

0

如果您可以将 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>");
于 2013-10-15T17:41:26.937 回答