Question

我很确定这是不可能的，但在放弃之前我想把它扔出去。

<svg version="1.1" viewBox="0 0 2 1" width="100%">
    <image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/>
</svg>
<div id="bg" class="bg"></div>
<div id="bg2" class="bg"></div>

<h2>IE10/11</h2>
<div id="bg3" class="bg"></div>
<div id="bg4" class="bg"></div>

JS：

// Chrome/Firefox/Safari
var x = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle fill="#000000" stroke="#000000" stroke-width="20" cx="105" cy="105" r="90"></circle> <circle fill="none" stroke="#0000FF" stroke-width="10" cx="300" cy="105" r="90"></circle></svg>');

var y = encodeURIComponent('<svg version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/></svg>');

$(function () {
    $('#bg').css('background-image', 'url("data:image/svg+xml;utf8,'+ x +'")');
    $('#bg2').css('background-image', 'url("data:image/svg+xml;utf8,'+ y +'")');
});

// IE 10/11
// Chrome/Firefox/Safari
var x = btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle fill="#000000" stroke="#000000" stroke-width="20" cx="105" cy="105" r="90"></circle> <circle fill="none" stroke="#0000FF" stroke-width="10" cx="300" cy="105" r="90"></circle></svg>');

var y = btoa('<svg version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/></svg>');

$(function () {
    $('#bg3').css('background-image', 'url("data:image/svg+xml;base64,'+ x +'")');
    $('#bg4').css('background-image', 'url("data:image/svg+xml;base64,'+ y +'")');
});

基本上我试图使用svg图像，编码svg元素并在元素的css中使用它。这适用于矢量，但不适用于通过svg加载的图像。

我相信这有关，https://bugs.webkit.org/show_bug.cgi?id=63548说“图片不允许加载更多资源”。

我看到的是没有浏览器支持此功能，或者我做错了什么。

可能对base64编码图像数据并使用它，正如我在这个小提琴中所展示的那样：http://jsfiddle.net/N2n27/3/。在支持svg过滤器（非IE）的浏览器上，这是一种模糊和其他过滤效果的便捷方式。

我在这里错过了什么吗？

Answer 1

y版本有两个问题。

a）svg元素没有名称空间（它在x版本中），但在y版本中它还需要xlink名称空间，因为图像href属性在xlink名称空间中。

b）SVG中的图像是外部的。

css背景是一个图像本身，因此它引用的任何SVG都无法加载外部资源。因此，您需要对内部图像数据进行URI编码，然后对外部SVG进行uri编码（从而对内部图像数据进行双重编码）

所以你需要这样的东西......

var y = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAA....

Which I've completed here for the Firefox/Chrome case

使用内联数据uri的svg图像

1 个答案: