遍历 JS 中的所有 SVG 元素答案

【问题标题】：Iterate through all SVG elements in JS遍历 JS 中的所有 SVG 元素
【发布时间】：2019-12-24 15:20:19
【问题描述】：

我无法在 JavaScript 中遍历 SVG 文件的所有子文件。我想遍历所有路径并对它们执行功能（将它们更改为多边形）。

我尝试使用querySelectorAll("path"); 创建一个路径数组，但没有成功。现在我正在尝试筛选 SVG 文件中的所有元素，同时转换路径。

<!DOCTYPE HTML>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Reader</title>
  </head>
  <body>
    <input type="file" id="fileReader" />
    <br>
    <p id="Content"></p>

    <script>
    document.getElementById("fileReader").addEventListener('change',function(){
      var fr = new FileReader();
      fr.onload = function(){
        console.log("File Loaded!")
      }
      parser = new DOMParser();
      var doc = parser.parseFromString(fr.readAsText(this.files[0]), "text/xml");
      console.log(doc);
      var path = "path";
      doc.querySelectorAll('*').forEach(function(){
          if($(this).is(path)){
              var polygon = doc.createElementNS("http://www.w3.org/2000/svg", "polygon");
              polygon.setAttribute("id", $(this).getAttribute("id"));
              console.log("Converting " + $(this).getAttribute("id"));
              var len = $(this).getTotalLength();
              var p = $(this).getPointAtLength(0);
              var seg = $(this).getPathSegAtLength(0);
              var stp=p.x+","+p.y;
              for(var i=1; i<len; i++){
                p=$(this).getPointAtLength(i);
                if ($(this).getPathSegAtLength(i)>seg) {
                  stp=stp+" "+p.x+","+p.y;
                  seg = $(this).getPathSegAtLength(i);
                }
              }
              polygon.setAttribute("points", stp);
              $(this).replaceWith(polygon);
          }
      });
    });
    </script>
  </body>
</html>

这给了我两个错误：

XML 解析错误：语法错误位置：file:///C:/Users/Temp/Desktop/Experiment.html 第 1 行，第 1 列：。

ReferenceError: $ 未定义。

我已经停止尝试使用 doc.children()，因为它不起作用。

【问题讨论】：

请您解释一下为什么需要它？
我一直在尝试将 SVG 路径转换为 kml 多边形，但我已经问了六个以上的问题，但没有得到正确的答案。我的解决方案是使用 JavaScript 将 SVG 路径转换为 SVG 多边形，然后简单地以 KML 格式（在坐标标签中）打印点。这已经持续了几个星期，现在我很紧张。请提供答案或投票。
这是getElementsByTagName s 很重要。但是，当您不在代码中使用该函数时，您会收到该错误似乎很奇怪...
$ 是 jquery，您需要加载 jQuery 库，但这将是一个问题，因为您无法加载其他文件，因为您是从文件中执行此操作的。最好删除所有 jquery 并重写为原生 DOM 调用。
这是我学习 JS 2 周后在 Stack Overflow 上其他答案的帮助下拼凑起来的。我根本不懂jQuery，所以我不知道你的意思。

标签： javascript html dom svg children

【解决方案1】：

只需将 jQuery 库添加到您的项目中即可。

代码：

<!DOCTYPE HTML>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <title>Reader</title>
  </head>
  <body>
    <input type="file" id="fileReader" />
    <br>
    <p id="Content"></p>

    <script>
    document.getElementById("fileReader").addEventListener('change',function(){
      var fr = new FileReader();
      fr.onload = function(){
        console.log("File Loaded!")
      }
      parser = new DOMParser();
      var doc = parser.parseFromString(fr.readAsText(this.files[0]), "text/xml");
      console.log(doc);
      var path = "path";
      doc.querySelectorAll('*').forEach(function(){
          if($(this).is(path)){
              var polygon = doc.createElementNS("http://www.w3.org/2000/svg", "polygon");
              polygon.setAttribute("id", $(this).getAttribute("id"));
              console.log("Converting " + $(this).getAttribute("id"));
              var len = $(this).getTotalLength();
              var p = $(this).getPointAtLength(0);
              var seg = $(this).getPathSegAtLength(0);
              var stp=p.x+","+p.y;
              for(var i=1; i<len; i++){
                p=$(this).getPointAtLength(i);
                if ($(this).getPathSegAtLength(i)>seg) {
                  stp=stp+" "+p.x+","+p.y;
                  seg = $(this).getPathSegAtLength(i);
                }
              }
              polygon.setAttribute("points", stp);
              $(this).replaceWith(polygon);
          }
      });
    });
    </script>
  </body>
</html>

【讨论】：