有没有一种方法可以使用JavaScript解析svg文件？

Question

我能够读取整个SVG块，但我只想要x1属性（并将其输入到数组中）。最好的方法是什么？下面是我想查看的SVG文件中的一行。

我尝试使用FileReader类，但不确定如何只获取x1。

<line style = "stroke:rgb(0,20,255)" stroke-width = "1" x1 = "25.53951" y1 = "12.65721" x2 = "27.65919" y2 = "16.0494" />"

const input = document.querySelector('input[type = "file"]')
input.addEventListener('change',function (e){
  console.log(input.files)
  const reader = new FileReader()
  reader.onload = function(){
    console.log(reader.result)
  }
  reader.readAsText(input.files[0])
}, false)

- Chung

Answer 1

在这种情况下，最简单的方法是将XML解析为Document，并使用通常的DOM方法获取所需内容。

可以尝试以下代码：

// const data = ...
const parser = new DOMParser();
const svgDoc = parser.parseFromString(data, 'image/svg+xml');

然后你可以这样做：

svgDoc.querySelector('line').getAttribute('x1');

- Brad