Question

我无法遍历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列：。

参考错误：未定义$ 。

由于它不起作用，我已停止尝试使用doc.children（）。

Answer 1

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

<脚本 src =“ https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”>

代码：

<!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>

遍历JS中的所有SVG元素

1 个答案: