3

I have the following path

<svg class="svg" height="100%" width="100%">
  <polygon points="0,0 200,0 100,100" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

The 0,0 refers to the top left corner of the SVG. How do I make it refer to the bottom right so that the triangle is always in the bottom right corner of the SVG (and it's parent div)?

This following question asked a similar question but no one answered it Svg path position

Happy Holidays

Community
  • 1
  • 1
Joe Isaacson
  • 4,012
  • 6
  • 30
  • 40

3 Answers3

6

First, your SVG will need to have a viewBox if you want consistent rendering.

For example:

<svg class="svg" height="100%" width="100%" viewBox="0 0 600 600">
    <polygon points="0,0 200,0 100,100" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

You don't precisely describe how you want the document to behave when the origin is shifted.

If you just want to shift the origin to the bottom right, you can just surround your content with a group element that shifts the coordinate space to 600,600.

<svg class="svg" height="100%" width="100%" viewBox="0 0 600 600">
    <g transform="translate(600 600)">
       <polygon points="0,0 200,0 100,100" style="fill:lime;stroke:purple;stroke-width:1" />
    </g>
</svg>

But that will mean that your triangle is off the bottom right of the screen, so you would need to adjust all your triangle coords accordingly.

<svg class="svg" height="100%" width="100%" viewBox="0 0 600 600">
    <g transform="translate(600 600)">
       <polygon points="-200,-200 0,-200 -100,-100" style="fill:lime;stroke:purple;stroke-width:1" />
    </g>
</svg>

Fiddle here

However if you actually wanted to invert the whole coordinate space so that the origin is at the bottom right and positive coordinate space is up and to the left - which is really just rotating the document 180deg - you can use:

<svg class="svg" height="100%" width="100%" viewBox="0 0 600 600">
    <g transform="rotate(180 300 300)">
       <polygon points="0,0 200,0 100,100" style="fill:lime;stroke:purple;stroke-width:1" />
    </g>
</svg>

Fiddle here

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
5

So the answer is to edit the perserve aspect ration to make it aligned to the xmax (right side) and ymin (bottom side) to make the bottom right corner positioning.

Below is the code

<svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMaxYMin meet"> 
   <g>
     <polygon points="0,100 0,90 100,100" style="fill:yellow;" />
   </g> 
</svg>
Joe Isaacson
  • 4,012
  • 6
  • 30
  • 40
0

Aside from using javascript, this seems like the best option available.

Right aligned coordinates in SVG

Community
  • 1
  • 1
cmonkey
  • 4,256
  • 1
  • 26
  • 46