html - Why do I have to change the `x` & `y` values of this 'rect' for it to be at the top-left of its viewport?

Question

<svg width="200" height="200" style="border: solid blue 5px;">
  <rect x="0" y="0" height="50" width="100" stroke="purple" stroke-width="30px" fill="green"/>
</svg>

Answer 1

There are 3 possibilities:

1. calculate the x-y-offset of the rectangle depending on the stroke-width to compensate the offset dislocation of the stroke-width: offset-x and offset-y values are stroke-width / 2

<svg width="200" height="200" style="border: solid blue 5px;">
  <rect x="15" y="15" height="50" width="100" stroke="purple" stroke-width="30px" fill="green"/>
</svg>