svgsvg-path

SVG points path relative to a point rather than absolute

I data in two parts:

  1. Position x,y
  2. Points px1,py1 px2,py2 .... pxn,pyn

I am constructing SVG from this data, but I want the points to be relative to the position, e.g. untreated points is as below

<svg height="210" width="500" viewBox='0 0 256 512' xmlns='http://www.w3.org/2000/svg' version='1.1' >
  <polygon 
      points="37.2016,0 0,28.1848 14.2097,73.7889 60.1934,73.7889 74.4032,28.1848 37.2016,0" 
      style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

But the position for the top-left of object should be 100,100, so the points should therefore all have 100 added.

Now, I can of course do this in the code that processes the data to generate the SVG, but is there a simple way to add on offset or bias to the points?

I tried the following (added x= and y=) but it made no difference to the viewing of the SVG:

<svg height="210" width="500" viewBox='0 0 256 512' xmlns='http://www.w3.org/2000/svg' version='1.1' >
  <polygon 
     x="100" y="100"
     points="37.2016,0 0,28.1848 14.2097,73.7889 60.1934,73.7889 74.4032,28.1848 37.2016,0" 
     style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Solution

  • Sure, add transform="translate(100,100)" to the polygon and remove the useless x and y attributes.