SVG animation in Processing not drawing at correct location - animation

Question

I'm trying to make a simple, quick and dirty demo interface in Processing, with the widget animations being made up of SVG frames that I loop through. I'm just learning and I don't really have any experience in this area, so bear with me.
The problem is that the x,y coordinates I have entered are not where the SVG is drawing.
Here is a screenshot comparing expected draw location vs actual draw location
I've checked my original SVGs (created in Adobe Animate CC and exported frame by frame), I played with shapeMode(), I tried to translate with path coordinates from the viewBox (it didn't change anything), and I've spent way too much time searching online. Here is the code:
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);
}
Here is the class for the Button (edited for the sake of this post so that it only draws one frame, instead of looping through all my SVG files) :
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);
}
}
And finally, the code for the SVG itself:
<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>
If additional information is needed, please let me know if I've missed anything! I appreciate the help, as I'm a bit of a beginner and no one around me knows much about this either.

Answer 1

The offset is coming from inside your svg file.
I tested this by loading your svg file alongside another svg file (which I got from going to File > Examples > Basics > Shape > LoadDisplaySVG and then going to Sketch > Show Sketch Folder and then copying bot1.svg from the example's data directory into my data directory. Then I run this code:
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);
}
The image.svg file is your svg file, and this is what I see:
This shows that "my" svg file draws with mouseX, mouseY as its upper-left corner, but yours has the offset.
Now, I'm not sure why your svg contains the offset, but this at least shows you that it's not the Processing code, and provides you with a simpler example that you can play with. If I were you I would go through your svg file with a fine-toothed comb. The offset might be obvious to somebody else, but I'm not very familiar with svg files. Good luck.