如何从现有的svg对象中分配css背景图像？

Question

我尝试根据

中的示例从现有SVG对象中分配背景图像

http://codepen.io/progers/pen/CAEks

// Short script to encode our SVG in base64
// This can be reversed using window.atob('base64')
var code = document.getElementById('code');
var demo = document.getElementById('demo');
var svg = document.getElementsByTagName('svg')[0];

// Convert the SVG node to HTML.
var div = document.createElement('div');
div.appendChild(svg.cloneNode(true));

// Encode the SVG as base64
var b64 = 'data:image/svg+xml;base64,'+window.btoa(div.innerHTML);
var url = 'url("' + b64 + '")';
code.innerHTML = 'Base64 CSS (for cross-browser compatibility)\n\nbackground-image: ' + url + ';';
demo.style.backgroundImage = url;

我创建了这个

http://jsfiddle.net/bj0e063q/1/ jsfiddle。

不同之处在于，在codepen中使用静态svg，而我想通过代码动态创建它。为什么我的例子不起作用？

Answer 1

您的代码有效，它只是没有运行，因为小提琴已经在窗口加载时执行，并且因为您需要在设置svg之前定义window.socialSharing。

编辑：

显然，为了使它工作，你需要在div上设置背景图像，并在svg上设置xmlns属性（虽然在IE中这个属性是自动添加的，所以你必须检查因为它的存在）：

svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");    

检查此更新的fiddle。