Question

我们有一个图标库，我们内联到文档的底部，如

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon1" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="green"/>
  </symbol>
  <symbol id="icon2" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="red"/>
  </symbol>
</svg>

只需在我们需要的地方引用这些图标，例如

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" width="16px" height="16px">
  <use xlink:href="#icon1"/>
</svg>

现在有时我们需要将图标用作背景图像，类似于

<div style="width:16px; height:16px; background-size:cover; background-image: url(//placehold.it/16x16)"></div>

可以使用here所述的data:image/svg+xml数据URI将svgs用作背景图像：

<div style='width:16px; height:16px; background-size:cover; background-image:url(&apos;data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="red"/></svg>&apos;)'></div>

但是，从数据URI内部引用ID的方式不同：

<h3>referenced in <code>svg</code></h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" width="16px" height="16px">
  <use xlink:href="#icon"/>
</svg>

<h3>referenced in <code>background-image</code>
<div style="width:16px; height:16px; background-size:cover; background-image:url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100'><use xlink:href='#icon'/></svg>&quot;)"></div>

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="red"/>
  </symbol>
</svg>

我假设data:image/svg+xml为文档创建了一个新的“上下文”，因此#icon指的是data:image/svg+xml内的一个节点（不存在，因为它在原文中）文件）。

有没有办法引用原始文档（比如与Shadow DOM API类似的ShadowRoot.host）？（可能类似于xlink:href=":host#icon"）

我想到的唯一解决方法是使用JavaScript来内联使用过的符号：

Array.from(document.querySelectorAll('[style*="data:image/svg+xml;utf8,"]'))
  .forEach(function(e) {    
    e.style.backgroundImage = getComputedStyle(e).backgroundImage.replace(
      /<use xlink:href='#([^']+)'\/>/g,
      function(match, id) {
        return document.getElementById(id).innerHTML.replace(/(^\s*|\s*$)/g, '').replace(/"/g, "'")
      }
    )
  })

<h3>referenced in <code>background-image</code> with JS inlining</h3>
<div style="width: 16px; height: 16px; background-size: cover; background-image: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100'><use xlink:href='#icon'/></svg>&quot;)"></div>
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="red"/>
  </symbol>
</svg>

但我真的希望完全避免使用JavaScript。

Answer 1

这是一个常见问题的微妙变化。

有没有办法引用原始文件

答案是否。作为<img>或background-image等加载的任何文件（包括数据URL形式的文件）都需要自包含。它们作为独立对象加载，不能引用其他文件。

您需要在数据网址中加入<symbol>。

svg as background-image：xlink to original in original document

1 个答案: