在不重新加载外部文件的情况下将渲染的 SVG 图像转换为内联 SVG？

Question

here 和here 这两个问题相似但又不相同。

假设这样的元素链接到外部 SVG 图像：

<div style="background-image: url("/images/tags/icon/star.svg");"></div>

如果图像已经呈现为背景图像，有哪些选项可以将此 SVG 图像转换为内联 SVG（文档中的其他位置）？

是否只有 this answer 中建议的重新加载外部文件的选项？

目标是尽可能跳过加载 SVG 文件。

Answer 1

还有其他解决方案，但如果您计划在文档中附加 SVG，AJAX 确实是最简单的。
但是，请注意这可能不是一个好主意。
您可能知道，SVG 是文档，它们的节点可以具有id 属性。 id 属性在每个文档中必须是唯一的，因此如果您附加两次相同的 svg 文档，其中包含带有 id 的节点，您将有重复的 id 并且可能会出现问题。

const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
  <defs>
    <rect id="rect1" x="0" y="0" width="50" height="50" fill="red"/>
  </defs>
  <use xlink:href="#rect1" stroke="green"/>
</svg>`;

function appendSVGDoc(markup, parent) {
  const doc = (new DOMParser).parseFromString(markup, 'image/svg+xml');
  const docEl = document.adoptNode(doc.documentElement); parent.appendChild(docEl);
}
// append a first version
appendSVGDoc(svg, document.body);
onclick = e => {
  // let's do some modifs
  document.getElementById('rect1').setAttribute('fill', 'yellow');
  onclick = e => {
    // append an other one
    appendSVGDoc(svg, document.body);
    // guess what color is the rect here?
  };
};

<p>click to modify the svg element.</p>
<p>click again to add a new copy of the original svg</p>

另一个例子？如果您的 svg 文档包含样式表，则此样式表的规则将影响您的整个文档：

const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="200">
  <style>
    :root {
      font: 40px Serif;
    }
    rect {
      fill: green;
    }
  </style>
  <text y="50">I'm a big text in an svg image.</text>
  <rect x="25" y="75" width="50" height="50"/>
</svg>`;

function appendSVGDoc(markup, parent) {
  const doc = (new DOMParser).parseFromString(markup, 'image/svg+xml');
  const docEl = document.adoptNode(doc.documentElement); parent.appendChild(docEl);
}
onclick = e => {
  appendSVGDoc(svg, document.body);
};

<p>I am a simple html text content, and here is a simple svg &lt;rect> that should be red: <svg width="50" height="50"><rect x="0" y="0" height="50" width="50" fill="red"/></svg></p>

<p> click to append the external SVG </p>

所以为了避免这种情况，我只能建议您在

function appendSVGDoc(blob, parent) {
  return new Promise((res, rej) => {
    const url = URL.createObjectURL(blob);
    const iframe = document.createElement('iframe');
    iframe.classList.add('svg-viewer');
    iframe.onload = e => {
      const doc = iframe.contentDocument;
      const docEl = doc.documentElement;
      // iframe doesn't auto size like <object> would
      iframe.width = docEl.getAttribute('width') || '100%';
      iframe.height = docEl.getAttribute('height') || '100%';
      res(doc);
    };
    iframe.onerror = rej;
    iframe.src = url;
    parent.appendChild(iframe);
  });
}

fetch(url)
  .then(resp => resp.blob())
  .then(blob => appendSVGDoc(blob, document.body));
.then(svgdoc => {
    // here manipulate the svg document
  })
  .catch(console.error);

StackSnippets® 过度保护（源自空）阻止我们访问内部 iframe 内容，我不得不将最后一个示例外包给 jsfiddle。