处理 SVG 渐变

【问题标题】：Processing SVG Gradient处理 SVG 渐变
【发布时间】：2012-05-17 00:43:08
【问题描述】：

我有一个 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);
}

感谢您的帮助。

【问题讨论】：

标签： svg processing gradient

【解决方案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();
}

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

【讨论】：