【发布时间】：2015-02-05 00:10:11
【问题描述】：
我正在尝试使用 SVG 图像作为 CSS 背景图像。所讨论的 SVG 最终将使用许多大型 JPEG 图像（嵌入或链接）作为其他 SVG 元素的掩码。我这样做而不是使用 PNG 来节省文件大小。 （我的高度压缩的灰度 jpeg 很小）
目前我只能让嵌入的 base64 编码图像正确显示，而 Safari 无法正常工作（除了使用 embed 直接显示 SVG）
以下是我的测试代码：
（所有图片都来自archive.org，链接应该是持久的——我省略了base64编码数据）
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml">
<style type="text/css">
body { font-family: Arial, sans; }
.box1, .box2, .box3 { width: 400px; height: 100px; background-size: 192px 192px; margin: 10px 10px 0px 0px; padding: 10px; }
.box1 { background: url("test1.svg"); }
.box2 { background: url("test2.svg"); }
.box3 { background: url("test3.svg"); }
.sml { width: 100px; height: 100px; margin: 10px 10px 10px 0px; }
</style>
</head>
<body>
<div class="box1">Test 1</div>
<div class="box2">Test 2</div>
<div class="box3">Test 3</div>
<img class="sml" src="test1.svg" type="image/svg+xml">
<img class="sml" src="test2.svg" type="image/svg+xml">
<img class="sml" src="test3.svg" type="image/svg+xml">
<embed class="sml" src="test1.svg" type="image/svg+xml">
<embed class="sml" src="test2.svg" type="image/svg+xml">
<embed class="sml" src="test3.svg" type="image/svg+xml">
</body>
</html>
工作嵌入图像 SVG
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:cc="http://web.resource.org/cc/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="192px" height="192px" viewBox="0 0 192 192">
<style type="text/css" id="style_css_sheet">
.orange { fill: #f9690e; }
.yellow { fill: #f1d40f; }
</style>
<defs>
<filter id="invert">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
</filter>
<rect id="box-bg" x="0" y="0" width="192px" height="192px" class="yellow" />
<rect id="box-fg" x="0" y="0" width="192px" height="192px" class="orange" />
<mask id="fg-mask" x="0" y="0" width="192px" height="192px" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image id="mask-img" width="192px" height="192px" filter="url(#invert)"
xlink:href="data:image/jpg;base64,
[[ DATA ]]"></image>
</mask>
</defs>
<use xlink:href="#box-bg" overflow="visible"></use>
<use xlink:href="#box-fg" mask="url(#fg-mask)" overflow="visible"></use>
</svg>
坏了？？图片 xlink 变体
<mask id="fg-mask" x="0" y="0" width="192px" height="192px" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image id="mask-img" width="192px" height="192px" filter="url(#invert)" xlink:href="http://bit.ly/1u61zrE"></image>
</mask>
所以... Safari 只喜欢嵌入标签，chrome 和 firefox 可以做背景，但只有当图像作为数据嵌入时。任何关于如何让 Safari 工作的想法，至少在嵌入数据方面都会很棒。如果有办法让它们全部工作，那就更好了......
谢谢。
【问题讨论】：
-
出于隐私原因，SVG-as-an-image 必须在一个文件中完整，有关详细信息，请参阅longsonr.wordpress.com/2013/10/23/…。
-
谢谢罗伯特 - 这描述了我认为在幕后发生的事情。然后我推测 Safari 尚不支持我正在做的部分工作，因为在任何情况下我都无法将我的 SVG 用作 safari 的背景图像。 （嵌入或链接图像）
-
对于任何回答这个问题的人，当有一个可行的解决方案时，我会接受这个答案 - 正如罗伯特所指出的那样，它可能不可用（还），尽管我对 JavaScript 解决方法持开放态度t 页特定。例如。如果像modernizr这样的东西通过预渲染并插入到不支持它的浏览器的DOM中来提供这个，那就太好了。 （即所有这些？？）
-
如果您要等到 SVG-as-an-image 支持外部图像数据，您将永远等待。
-
罗伯特你能把它添加为答案，我会接受它