我正在尝试将SVG图像用作CSS背景图像。这些SVG最终将使用许多大型JPEG图像（嵌入式或链接式）作为其他SVG元素的掩码。我这样做是为了节省文件大小，而不使用PNG。 （我的高度压缩的灰度JPEG非常小）
目前，我只能正确显示嵌入的base64编码图像，而Safari根本无法正常工作（除非使用嵌入来直接显示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>
图片链接变体损坏
<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工作，至少可以使用嵌入数据，这将是很好的。如果有一种方法可以让它们都正常工作，那就更好了......
谢谢。