时间戳

首页 > 解决方案 > 有没有办法用javascript解析svg文件

javascript - 有没有办法用javascript解析svg文件

问题描述

我能够读取整个 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)

标签： javascriptsvg

解决方案

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

尝试这样的事情：

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

然后您可以执行以下操作：

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

推荐阅读