如何获取要插入 DOM 的 SVG 文档数据？答案

【问题标题】：How to get SVG document data to be inserted into the DOM?如何获取要插入 DOM 的 SVG 文档数据？
【发布时间】：2021-07-26 02:26:37
【问题描述】：

我正在尝试使用以下代码从 CDN 加载 SVG 文件：

<object type="image/svg+xml" data="https://cdn.mywebsite.com/path/file.svg"></object>

SVG 文件位于 CloudFront CDN 提供的 S3 存储桶中。它的内容类型设置为“image/svg+xml”。据我所知，我的 S3 存储桶和 CDN 配置为允许来自任何来源的 CORS 请求。

如果我查看浏览器的“网络”选项卡，HTTP GET 请求成功，它会收到 SVG 数据作为响应。但是，文档数据并没有插入到 DOM 中，所以它不显示，也无法被 JavaScript 访问。

如何将 SVG 文档嵌入到我的网页中，使其成为 DOM 的可访问部分？

【问题讨论】：

要访问 svg 中的路径等，您需要插入 svg 而不仅仅是像您显示的文件引用（在文本编辑器中打开 svg 文件时看到的内容）。
@ChrisW。当网站和文件保存在本地时，HTML 代码有效，但当我的网站部署到服务器并从 CDN 加载文件时，它不起作用。
除非包含 object 标签的宿主页面和包含 svg 文件的 cdn 在同一个域中，否则您将无法通过 javascript 获取内容。

标签： html amazon-s3 svg amazon-cloudfront cdn

【解决方案1】：

正如 Robert Longson 亲切地评论的那样，直接嵌入是不可能的。但我确实找到了办法。

我使用了这个 JavaScript（使用 axios 库）：

var parser = new DOMParser();
let response = await axios.get('https://cdn.mywebsite.com/path/file.svg');
let svgDocument = parser.parseFromString(response.data, "image/svg+xml")

如果 CORS 配置正确，它允许请求，那么您可以将响应正文解析为文档。您可以从那里处理或嵌入文档。

【讨论】：

【解决方案2】：

如果允许您阅读 SVG，这个原生 Web 组件 <load-svg>

将 SVG 读取为文本
将 SVG 作为 DOM 元素添加到 shadowDOM
移动样式元素从 lightDOM 到 shadowDOM
所以样式仅应用于当前的 SVG

<load-svg src="//graphviz.org/Gallery/directed/fsm.svg">
  <style>
    svg  { height:180px }
    text { stroke: green }
    path { stroke: red ; stroke-width:3 }
  </style>
</load-svg>

<script>
  customElements.define('load-svg', class extends HTMLElement {
    async connectedCallback() {
      let src = this.getAttribute("src");
      let svg = await (await fetch(src)).text();
      this.attachShadow({ mode: 'open' }).innerHTML = svg;
      this.shadowRoot.append(this.querySelector("style"));
    }
 });
</script>

更复杂的例子：How to make an svg interactive to gather comments/annotations on depicted elements

【讨论】：