css - 使用带有内联数据 uri 的 svg 图像

Question

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

这是一把 fiddle ，http://jsfiddle.net/sqszuzep/6/

<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 编码并使用它，正如我写的这个 fiddle 中所演示的那样: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