Question

我有一个基本程序，基本上只显示导入的svg。有什么方法可以改变svg的填充吗？

var img;

function preload() {
  img = loadImage("assets/svgImage.svg")
}

function setup() {

  createCanvas(720, 400);
  background(200);
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  image(img, 50, 50, 50, 50)

}

我尝试了以下几点：

function setup() {

  img.drawingContext.fillStyle = '#475731'
  image(img, 50, 50, 50, 50)

}

但这似乎对我没有任何帮助。

Answer 1

http://zenozeng.github.io/p5.js-svg/examples/#manipulating

“操作现有SVG”页面上的示例表示您需要使用querySVG函数来获取路径/形状组件，然后您可以修改其fill属性。

这是给出的例子：

var svg, path;
function preload() {
    svg = loadSVG('test.svg');
    frameRate(20);
}

function setup() {
    createCanvas(600, 200, SVG);
    image(svg, 0, 0, 200, 200);
    path = querySVG('path')[1];
}

function draw() {
    // update line width of 2nd line
    path.attribute('stroke-width', frameCount % 20);
    if (frameCount === 18) {
        noLoop();
        save(); // save current SVG graphics
    }
}

我想在你的情况下会是：

path.attribute('fill', '#475731');

在P5.js中更改SVG图像的填充

1 个答案: