Question

我在s的背景中添加了一个svg图像。

        div#cover{
            background-image:url('dwm.svg');
        }

我想知道是否有任何方法可以动态编辑此svg的某些方面，如填充，描边等。

Answer 1

您可以尝试将svg作为DOM的一部分，进行修改，然后将背景设置为从DOM中提取的修改过的svg的数据uri。虽然这可能是一种hacky，但它的工作原理

$('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')');
$('button').click(function(){
    $('#fill').attr('fill', '#ff00ff');
    $('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')');
});

<div id="bg"></div>
<div id="svg">[svg data]</div>

http://jsfiddle.net/zSRW5/

如果您不想嵌入svg，可以随时使用ajax来获取它。

Answer 2

没有。我相信如果你在页面中嵌入SVG并引用它，你只能这样做，即便如此，由于浏览器错误，你必须将背景值更改为其他内容并返回引用。

动态编辑设置为背景图像的.svg文件

2 个答案: