0

我想将 SVG 文件中的所有 SVG 路径转换为 ​​SVG 多边形。

我想遍历给定文件中的所有路径，其中路径具有不同的 id 值。我还想提取 id 值。（转换为多边形的路径应该具有相同的原始 id 值。）

<!DOCTYPE html>
<html>

<meta charset="UTF-8">

<head>
<h1>SVG paths to polygons</h1>
<script type="text/javascript">
var request = new XMLHttpRequest();
request.open("GET", "file:///C:/Users/Temp/Desktop/input.svg", true);
request.setRequestHeader("Content-Type", "image/svg+xml");
request.addEventListener("load", function(event) {
  var response = event.target.responseText;
  var doc = new DOMParser();
  console.log("Document Loaded!");
  var allPaths =  Array.from(doc.querySelectorAll("path"));
  for(path in allPaths) {
    var polygon = doc.createElement("polygon");
    polygon.setAttribute("id", allPaths[path].getAttribute("id"));
    console.log("Converting " + allPaths[path].getAttribute("id"));
    var len = allPaths[path].getTotalLength();
    var p = allPaths[path].getPointAtLength(0);
    var seg = allPaths[path].getPathSegAtLength(0);
    var stp=p.x+","+p.y;

    for(var i=1; i<len; i++){

        p=allPaths[path].getPointAtLength(i);

        if (allPaths[path].getPathSegAtLength(i)>seg) {

        stp=stp+" "+p.x+","+p.y;
        seg = allPaths[path].getPathSegAtLength(i);
        }
    }
    polygon.setAttribute("points", stp);
    allPaths[path].replaceWith(polygon);
    }
});
request.send();
</script>
</head>
</html>

此代码不会更改“input.svg”中的任何内容。它给了我一个 CORS 请求而不是 http 错误，并且不允许我在自己的系统桌面上读取文件。

如何从我自己的桌面（Windows 10）读取 SVG 文件？

4

0 回答 0