将SVG加载到P5草图

Question

我现在已经在Processing中编程了一段时间。 我还使用过形状和SVG文件。 对于处理中的SVG文件有这种不起眼的经验让我觉得它在P5.js中会是同一个故事，显然不是这样，让我寻求帮助。

回到处理我会有这样简单的代码：

PShape shape;
/***************************************************************************/
void setup() 
{
  size(400, 400);
  shapeMode(CENTER);
  shape = loadShape("bot1.svg");
} 
/***************************************************************************/
void draw() 
{
  background(100);
  pushMatrix();
  translate(width/2, height/2);
  shape(shape, 0, 0);
  popMatrix();
}

P5不起作用。 P5.js等同于什么？

    var shape;
    var canvas;
/***************************************************************************/
    function setup() 
    {
      canvas = createCanvas(400, 400);
      canvas.position(0, 0);
      //shapeMode(CENTER);
      //shape = loadShape("bot1.svg");
    } 
    /***************************************************************************/
    void draw() 
    {
      background(100);
      push();
      translate(width/2, height/2);
      //shape(shape, 0, 0);
      pop();
    }

Answer 1

P5.js不支持开箱即用加载SVG文件。 Here是对GitHub的讨论，其中包含大量有关此内容的信息。

但Processing.js确实支持SVG文件。有关the reference的更多信息。

您已使用processing.js标记了自己的问题，但我认为您最初询问p5.js。但请注意，Processing.js和P5.js是两个完全不同的东西。

Answer 2

除了凯文的回答，如果你想在p5.js中加载和SVG，你应该看看p5.js-svg和svg manipulation example

作为一个快速的开始，你可以试试这个：

1. 将p5.svg.js下载到p5。草图库文件夹
2. 在index.html中导入它：console.log(res);
3. 创建SVG画布：<script src="libraries/p5.svg.js" type="text/javascript"></script>