How do I move SVG child shapes?

Programming Questions

danempls

How do I move SVG child shapes?

in Programming Questions • 2 years ago

I would like to take a child shape from an SVG and draw it in a specific place. Specifically, I have a US Map SVG and would like to be able to select an individual state and draw that state at a place on the screen.

I can choose an individual child to draw, but when I try to translate or place the shape, it still draws it in relation to where the child shape is within the larger SVG.

Here is some example code:

(using http://en.wikipedia.org/wiki/File:Blank_US_Map.svg)

PShape usa;
PShape selection1;
PShape selection2;
void setup() {
size(800, 400);
smooth();
frameRate(120);
usa = loadShape("Blank_US_Map.svg");
}
void draw() {
background(255);
stroke(0);
selection1 = usa.getChild("MN");
selection2 = usa.getChild("MT");
shape(selection1, 0, 0);
shape(selection2, 0, 0);
}

If you run this code, the two states, Minnesota and Montana, are drawn according to where they are on the map, instead of both being placed at (0,0). How can I get the child shape to be placed where I want it?

I have tried using Geomerative as well, but cannot get it to work.

Thanks!

Replies(5)

PhiLho

Re: How do I move SVG child shapes?

2 years ago

Try using translate()?

danempls

Re: Re: How do I move SVG child shapes?

2 years ago

Thanks for the tip, but:

translate() does not work, it does largely the same thing. The coordinate system does translate and shift, but the child shapes are still drawn within relation to the original shape.

Thanks,

Dane

mbraendle

Re: How do I move SVG child shapes?

2 years ago

If you inspect the SVG in a text or XML editor you will see that the coordinates of the states <path ... id="xx"> are absolute and not relative to a parent object. So if you need to place an individual object at a given coordinate, you need to find out from the path coordinates how much displacement you have to add.

See the following code how you can shift and change the individual objects:

PShape usa;
PShape selection1;
PShape selection2;
void setup() {
size(800, 800);
smooth();
frameRate(120);
usa = loadShape("Blank_US_Map.svg");
selection1 = usa.getChild("MN");
selection2 = usa.getChild("MT");
selection1.disableStyle();
selection2.disableStyle();
}
void draw() {
background(255);
stroke(0);
// uncomment next two lines for hiding objects
// selection1.setVisible(false);
// selection2.setVisible(false);
float shift = frameCount % 20 - 10 ;
selection1.translate(shift,shift);
selection2.translate(-shift,-shift);
// if don't want to show the whole USA comment out next line
shape(usa, 0,0);
// uncomment next two lines for displaying MN and MT states only
// shape(selection1,0,0);
// shape(selection2,0,0);
selection1.translate(-shift,-shift);
selection2.translate(+shift,+shift);
}

danempls

Re: Re: How do I move SVG child shapes?

2 years ago

Thanks, mbraendle.

So essentially, I would have to look up each state within the svg file and record an offset for each one. If I wanted a user to select a state, then have the program draw the outline of that state within a specific area of the window, I would have to manually index an offset for each one and match it to the selection every time?

Thanks!

mbraendle

Re: How do I move SVG child shapes?

2 years ago

Like this?

PShape usa;
PShape selection1;
float selection1_xoffset = Float.MAX_VALUE;
float selection1_yoffset = Float.MAX_VALUE;
void setup() {
size(800, 800);
smooth();
frameRate(120);
usa = loadShape("Blank_US_Map.svg");
selection1 = usa.getChild("MN");
float[] vertex_temp = new float[2];
for (int i=0; i < selection1.getVertexCount(); i++) {
vertex_temp = selection1.getVertex(i);
selection1_xoffset = min(vertex_temp[0], selection1_xoffset);
selection1_yoffset = min(vertex_temp[1], selection1_yoffset);
}
}
void draw() {
background(255);
stroke(0);
selection1.translate(-selection1_xoffset,-selection1_yoffset);
shape(selection1,0,0);
selection1.translate(selection1_xoffset,selection1_yoffset);
}

Have a look at PShape.java source code. Some methods there can be accessed, but are not documented in the Processing reference for Pshape.

Top Reply