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

Question

我在 div 的背景中添加了 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 来获取它。