使用带有内联数据 uri 的 svg 图像答案

【问题标题】：Using an svg image with inline data uri使用带有内联数据 uri 的 svg 图像
【发布时间】：2014-10-09 17:16:44
【问题描述】：

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

<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）的浏览器上，这是进行模糊和其他过滤器效果的便捷方式。

我错过了什么吗？

【问题讨论】：

我觉得blurjs用的就是这种方式，大家下载下来学习参考一下

标签： css image svg

【解决方案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

【讨论】：