Samul Samul - 6 months ago 37
HTML Question

CHANGE 0,0 from SVG

I have an SVG object (

) in my HTML code and the coordinates 0,0 is at the leftmost and topmost of the element. How can I make the 0,0 be the leftmost and bottommost of the element without doing any other change to my code, only changing the attributes/style of SVG element?


<svg viewBox="0 0 15000 15000">...[HERE COMES THE VECTOR CONTENT]...</svg>


Surround the contents of your SVG with a group that has a transform applied. The transform should be a scale of -1 in the Y direction (to flip vertically) and a translate to move the flipped content back on screen.

However be aware, as Robert said, that some elements like text and images will now end up upside down. So if you need to use those elements, you will need to aaply a transform on those to flip them back up the right way.

<svg viewBox="0 0 400 300">
  <g transform="translate(0,300) scale(1,-1)">

    <rect width="100%" height="100%" fill="#f8f8ff"/>
    <line x1="0" y1="0" x2="100" y2="100" stroke="red" stroke-width="5"/>