svg - 处理 SVG 渐变

Question

我有一个 2 层（背面，正面）的 SVG。
我需要用颜色填充背面（颜色将是随机的）。
但是前面必须保持原样。
如何在不影响正面的情况下填充背面？

PShape elem;
PShape back;
PShape front;

void setup()
{
  size(900,600);
  background(255);
  fill(100);
  elem = loadShape("resources/images/elem.svg");
  back = elem.getChild("back");
  front = elem.getChild("front");
  smooth();
  noLoop();
}

void draw(){  
  elem.disableStyle();
  fill(0, 51, 102);
  noStroke();
  shape(back, 50, 50, 250, 250);
  shape(front, 50, 50, 250, 250);
}

感谢您的帮助。

Answer 1

没有 svg 很难测试你的确切设置。不过，您应该能够使用pushStyle()、popStyle() 对来隔离部分形状的绘图样式。

例如

PShape elem;
PShape back;
PShape front;

void setup()
{
  size(900,600);
  background(255);
  fill(100);
  elem = loadShape("resources/images/elem.svg");
  back = elem.getChild("back");
  front = elem.getChild("front");
  smooth();
  noLoop();
}

void draw(){  
  elem.disableStyle();
  pushStyle();
    fill(0, 51, 102);
    noStroke();
    shape(back, 50, 50, 250, 250);
  popStyle();
  pushStyle();
    shape(front, 50, 50, 250, 250);
  popStyle();
}

缩进只是一个视觉提示，实际上并不需要。