2

最近我一直在学习傅里叶变换和傅里叶级数。我受到 3Blue1Brown视频的启发，我开始编写自己的画圆机程序，他在视频中展示了该程序。遗憾的是 python 的图形界面非常糟糕，所以我决定使用 p5.js。进展非常顺利，但唯一的问题是我只能在参数函数上测试我的程序，例如f(t) = (3sin(t) , cos(5t))。我花了整整一周时间搜索如何将包含<path>2D 点数组的 .svg 文件转换为可以测试程序，但我找不到与此相关的主题。有人可以向我解释我该怎么做吗？或者我可能会错过一些关于 svg 文件如何适合 javacript 的信息，因为我实际上对 html 和 svg 不太了解（计划很快学习）。

我试过那个方法：

  var svg = fetch("https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg")
    .then(response => response.text())
    .then(text => (new DOMParser()).parseFromString(text, "image/svg+xml"))
    .then(svg => svg.documentElement);

  var path = svg.querySelector("path")

但它会引发错误：

Uncaught TypeError: svg.querySelector is not a function
at setup (Sketch.js:41)
at m.<anonymous> (p5.min.js:3)
at m.<anonymous> (p5.min.js:3)
at new m (p5.min.js:3)
at n (p5.min.js:3)

我检查并证明这svg是一个空值。有人可以帮我做那件事吗？谢谢！

4

2 回答 2

1 
 var svg = fetch("https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg")
    .then(response => response.text())
    .then(text => (new DOMParser()).parseFromString(text, "image/svg+xml"))
    .then(parsedSvg => {
      // In here you can do stuff with the DOM parsed from the above promise chain
      var path = parsedSvg.querySelector("path")
      console.log(path)
    });

// Out here, svg just refers to an unresolved promise 
// Uncaught TypeError: svg.querySelector is not a function 
// var path = svg.querySelector("path")

密码笔

于 2020-04-29T02:25:23.273 回答
0

看起来好像您正在尝试使用 JavaScript 访问 SVG 的内部结构。

SVG 有自己的 DOM，与 HTML 分开。SVG Dom 通过名称空间引用。

以下是使用 JavaScript 创建 SVG 的示例：

var NS="http://www.w3.org/2000/svg";
var svg=document.createElementNS(NS,"svg");
svg.width=32;
svg.height=32;
svg.setAttribute('viewBox', '-4 -5 32 32');
svg.setAttribute("class", "svg-circle");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "12");
circle.setAttribute("cy", "12");
circle.setAttribute("r", "13");
circle.setAttributeNS(null, "stroke-width", "2");
const circleBox = document.createElement("div");
circleBox.classList.add("svg-circle", "circleBox");
document.body.appendChild(circleBox);
于 2020-04-29T00:26:47.317 回答