Shape Coordinate System

werty37

Hi

I am trying to draw an SVG at 0,0. The dimension of the SVG is 568x568px. But somehow Processing does not draw the SVG at (0,0). Does PShape have a different coordinate system?

PShape floorPlan;
int ellipseSize = 10;

void setup() {
  size(1024, 768);
  svg = loadShape("svg.svgz");
  background(255);
  smooth();
}

void draw() {
  ellipse(ellipseSize/2, ellipseSize/2, ellipseSize, ellipseSize);
  shape(svg, 0, 0);
}

I would like to have the SVG at the center. How do i achieve this please?

Thanks S

Chrisir

shapeMode(CENTER);

But it cann well be that it’s positioned at 300 or so I guess

Then you need to translate it

werty37

Thanks Chrisir. With shapeMode(CENTER), it's still not centered. This is the SVG code.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-110 393 568 568" enable-background="new -110 393 568 568" xml:space="preserve">
<rect x="-54.3" y="541.4" fill="none" stroke="#F15A24" stroke-miterlimit="10" width="456.6" height="271.1"/>
<g>
    <rect x="21.1" y="600.9" fill="none" stroke="#F2F2F2" stroke-miterlimit="10" width="151.7" height="152.3"/>
    <rect x="175.1" y="600.9" fill="none" stroke="#F2F2F2" stroke-miterlimit="10" width="151.7" height="152.3"/>
    <text transform="matrix(1 0 0 1 73.96 682.52)" font-family="'MyriadPro-Regular'" font-size="12px">151.7cm</text>
    <text transform="matrix(0.583 0 0 0.583 116.4512 678.5239)" font-family="'MyriadPro-Regular'" font-size="12px">2</text>
</g>
<text transform="matrix(1 0 0 1 -99.5591 411.2604)" font-family="'MyriadPro-Regular'" font-size="12px">(0,0)</text>
<rect x="-110" y="392.9" fill="none" stroke="#000000" stroke-miterlimit="10" width="568" height="568.1"/>
</svg>

I'm thinking this is the culprit in the SVG code.

viewBox="-110 393 568 568"

Please share your thoughts.

Cheers

jeremydouglass

Right. Nothing about your actual SVG data in the SVG file is centered -- not the viewbox, or the background, or the rects. where did you get it? Can you just draw another SVG that better suits your needs? If not, you should translate by either the canvas offsets or the canvas - content offsets.

Luckily the SVG coordinate system is similar to Processing -- 0,0 is upper left corner.