How do I position this SVG path so that the origin 0,0 is in the bottom right corner?

Question

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

Answer 1

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