处理中的 SVG 动画未在正确位置绘制答案

【问题标题】：SVG animation in Processing not drawing at correct location处理中的 SVG 动画未在正确位置绘制
【发布时间】：2016-08-10 21:08:03
【问题描述】：

我正在尝试在 Processing 中制作一个简单、快速和肮脏的演示界面，小部件动画由我循环播放的 SVG 帧组成。我只是在学习，我在这方面并没有任何经验，所以请多多包涵。问题是我输入的 x,y 坐标不是 SVG 绘制的位置。 Here is a screenshot comparing expected draw location vs actual draw location

我检查了我的原始 SVG（在 Adobe Animate CC 中创建并逐帧导出），我使用 shapeMode()，我尝试使用 viewBox 中的路径坐标进行转换（它没有改变任何东西），并且我花了太多时间在网上搜索。代码如下：

ArrayList<Button> buttons;

//creating background grid(50x50)
int nbOfHorizontalLines = 20;
int nbOfVerticalLines = 30;

void setup() {
  size(1500, 1000);
  buttons = new ArrayList<Button>();

  // button constructor: x, y, width, height, text
  buttons.add(new Button (100, 100, 100, 100, "100,100 (top left corner of button should be drawn here)"));

}

void draw() {
  background(200);
  frameRate(20);

  float distanceBetweenHorizontalLines = (float)height/nbOfHorizontalLines;
  float distanceBetweenVerticalLines = (float)width/nbOfVerticalLines;

  for(int i = 0; i < nbOfHorizontalLines; i++)
  {
    stroke(#56A9FA);
    line(0, i *distanceBetweenHorizontalLines, width, i*distanceBetweenHorizontalLines);  
  }

  for(int i = 0; i < nbOfVerticalLines; i++)
  {
    stroke(#56A9FA);
    line(i*distanceBetweenVerticalLines, 0, i*distanceBetweenVerticalLines, height);
  }

  // draw buttons
  for (Button b : buttons) {
    b.drawButton();

  }
  textSize(15);
  text("~210,140", 210, 128);
}

这是 Button 的类（为了这篇文章而进行了编辑，以便它只绘制一帧，而不是循环遍历我的所有 SVG 文件）：

class Button {

  float x, y;
  //width and height
  float w, h;
  //cycles through the animation files 
  ArrayList<PShape> restFrames;
  //var to load current frame
  PShape frame;
  int frameIndex;
  //assign text string from parameter to t
  String t;


  public Button(float newX, float newY, float newWidth, float newHeight, String newText) {

    x = newX;
    y = newY; 
    w = newWidth ;
    h = newHeight;
    frameIndex = 0;
    t = newText;
    restFrames = new ArrayList<PShape>();

    restFrames.add(loadShape("cleanBreathingNoBG_1.svg"));

  }

  void drawButton() {
    shapeMode(CORNER);
    PShape frame = restFrames.get(frameIndex);

    shape(frame, x, y, w, h);  
    textSize(18);
    fill(0);
    textAlign(LEFT, TOP);
    text(t, x, y);
  }
}

最后，SVG 本身的代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="386px" height="363px" viewBox="0 0 386 363">
<defs>
<path id="Layer0_0_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 160.95
Q 478.0671875 309.616015625 464.95 476.9"/>

<path id="Layer0_1_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 464.95 476.9
Q 607.547265625 499.9689453125 769.9 479.9"/>

<path id="Layer0_2_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 770.9 481.9
Q 761.9529296875 312.828515625 769.9 158.95"/>

<path id="Layer0_3_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 157.95
Q 614.925 174.6916015625 769.9 156.95"/>

<path id="Layer0_4_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 463.95 475.9
L 442.95 502.9"/>

<path id="Layer0_5_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 769.9 478.9
L 783.9 503.9"/>

<path id="Layer0_6_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 771.9 158.95
L 782.9 183.95"/>

<path id="Layer0_7_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 785.9 505.9
Q 781.89296875 341.61796875 784.9 187.95"/>

<path id="Layer0_8_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 446.95 504.9
Q 616.425 506.6560546875 780.9 505.9"/>

<path id="Layer0_9_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 452.95 159.95
L 439.95 182.95"/>

<path id="Layer0_10_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 442.95 501.9
Q 449.8580078125 337.425 439.95 186.95"/>
</defs>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_0_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_1_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_2_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_3_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_4_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_5_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_6_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421.7,-148.75) ">
<use xlink:href="#Layer0_7_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_8_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_9_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_10_1_STROKES"/>
</g>
</svg>

如果需要更多信息，如果我遗漏了什么，请告诉我！感谢您的帮助，因为我是一个初学者，而且我周围的人也不太了解这一点。

【问题讨论】：

您能否将问题缩小到仅使用单个 svg 文件，而不是遍历 51 个单独的文件？我想帮忙，但我需要能够复制和粘贴您的代码才能在我的机器上运行它。（换句话说，尝试发布minimal reproducible example。）
谢谢@KevinWorkman，我已经对其进行了编辑，只绘制了一个 SVG。希望应该这样做！

标签： animation svg processing

【解决方案1】：

偏移量来自您的svg 文件。

我通过将您的svg 文件与另一个svg 文件（我从转到File > Examples > Basics > Shape > LoadDisplaySVG 然后转到Sketch > Show Sketch Folder 然后将bot1.svg 从示例的data 目录复制到我的data 目录。然后我运行这段代码：

PShape yourShape;
PShape myShape;

void setup(){
  size(500, 500);
  yourShape = loadShape("image.svg");
  myShape = loadShape("bot1.svg");
}

void draw(){
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
  shape(yourShape, mouseX, mouseY, 100, 100);
  shape(myShape, mouseX, mouseY, 100, 100);
}

image.svg 文件是您的 svg 文件，这就是我看到的：

这表明“我的”svg 文件以mouseX, mouseY 作为其左上角进行绘制，但您的文件有偏移量。

现在，我不确定为什么您的 svg 包含偏移量，但这至少表明它不是处理代码，并为您提供了一个更简单的示例，您可以玩和。如果我是你，我会用细齿梳子浏览你的svg 文件。偏移量对其他人来说可能很明显，但我对svg 文件不是很熟悉。祝你好运。

【讨论】：