如何读取本地 SVG 文件并将其转换为文本？答案

【问题标题】：How do I read and convert a local SVG file into text?如何读取本地 SVG 文件并将其转换为文本？
【发布时间】：2020-08-28 11:41:47
【问题描述】：

我正在尝试找到一种将本地（服务器）SVG 文件转换为文本或对象的方法。我见过一些解决方案，但它们主要是关于在页面上内联显示的 SVG。我想从磁盘中检索它并直接访问它的数据。

目标是公开 SVG 文件中的信息，例如路径元素。我想阅读这些信息并进一步处理它。

例子

<svg height="210" width="400"><path d="M150 0 L75 200 L225 200 Z" /><path d="M150 0 L75 200 L225 200 Z" /></svg>

我正在尝试以编程方式从 SVG 文件（如上面包含的文件）中检索路径数据。循环遍历所有路径元素并获取“d”后面的数据。目前使用 Vue 并在本地工作。

【问题讨论】：

“将 […] SVG 文件转换为 […] 对象”是什么意思？预期的结果是什么？您使用的是什么服务器设置？这是 SVG 特有的，还是您在获取文件时遇到问题？到目前为止，您到底尝试了什么？为什么要将这个问题标记为filereader？您正在使用哪些 API？
您需要在此处发布您采取的步骤以及您获得代码的位置，然后其他人可能会介入并提供帮助。
@user4642212 我想读取 SVG 文件的内容<svg height="210" width="400"> <path d="M150 0 L75 200 L225 200 Z" /> </svg> 我正在尝试一种方法来从 SVG 文件中检索路径数据，例如上面包含的文件。我正在使用 Vue，目前是本地的。

标签： javascript vue.js svg webpack

【解决方案1】：

您应该能够使用Fetch 和DOMParser API。

类似于（但不一定完全是）以下内容：

function getAndModifySVG(url) {
  return fetch(url)
            // Get SVG response as text
            .then(response => response.text())
            // Parse to a DOM tree using DOMParser
            .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
            // Find path with id="myPath" and return the d attribute
            .then(data => data.getElementById("myPath").getAttribute("d"))
}

【讨论】：