svg cartesian

6.4 Technique: Converting from Cartesian Coordinates

Example 1

Transformed Cartesian coordinates

<svg width="200px" height="200px"
    viewBox="0 0 200 200"
    xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(100,100) scale(1,-1)">
    <!-- axes -->
    <line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/>
    <line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/>
    <!-- trapezium -->
     <polygon points="30 30, 90 30, 70 70, 30 70"
     style="fill:chocolate"/>
  </g>
</svg>