Question

我正在尝试将SVG图像用作css背景图像。所讨论的SVG最终将使用许多大的JPEG图像（嵌入或链接）作为其他SVG元素的掩码。我这样做而不是使用PNG来节省文件大小。（我高度压缩的灰度jpegs很小）

目前我只能正确显示嵌入式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>

碎?? image xlink variant

  <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工作的任何想法，至少使用嵌入式数据都会很棒。如果有办法让他们全部工作，甚至更好......

感谢。

Answer 1

对于privacy reason，SVG-as-a-image必须在一个文件中完成。浏览器永远不会支持SVG-as-a-image中的外部引用。基本前提是你只能使用光栅图像进行SVG-as-a-image。

如果您需要外部参考，请使用<object>或<iframe>

Answer 2

正如Robert Longson所提到的，浏览器不会加载从用作图像的SVG引用的外部文件（HTML <img>或CSS背景图像）。

<embed>标记应该工作，加载整个SVG和链接图像。但是，<embed>最近才变得标准化，因此可能存在一些不一致之处。为确保获得最大支持，请混合使用<object>代码和<embed>代码：

<object class="sml" data="test1.svg" type="image/svg+xml">
    <embed class="sml" src="test1.svg" type="image/svg+xml" />
</object>

背景图像SVG与掩码使用外部图像不工作

的index.html

使用嵌入式图像SVG

碎?? image xlink variant

2 个答案: