Investigate SVG Coordinate System
Closed this issue · 1 comments
Base terms:
Coordinate System - origin (0;0) and x/y coordinates
Canvas - infinite drawing surface
User Space (User Coordinate System) - like new layer of coordinates cloned from parent one
Initial User Space (Initial User Coordinate System) - root/first layer of coordinates
Viewbox - rectangle fragment for Canvas mapped to Viewport
Viewport - rectangle area to render Canvas fragment on ("window to Canvas")
Viewport Space (Viewport Coordinate System) - coordinates on Viewport
Mental touch:
Canvas -> User Spaces -> Viewbox -> Viewport
Canvas surface, on top of it IUS created and establishes drawing origin (0;0), on top of IUS entire hierarchy of dependent USes can be created, drawings are performed on Canvas through those USes, Viewbox then slices fragment of Canvas and fit it to Viewport.
New US can be created with transform.
By default Viewbox has the same width/height as Viewport and same origin as IUS, but we can change that with viewBox.
Example:
We initiate new User Space with -element and transform, shift it from IUS (0;0) to (100;100), and draw some primitive at (10;10) of this US.
So circle will be rendered on Viewport at (110;110).
After that we can shift Viewbox from IUS origin (0;0) to (50;50) with viewBox.
Circle still will be located on Canvas at (110;110), but in Viewport Space it will be at (60;60).
So in SVG element the circle will be rendered at (60;60).
<svg viewBox='50 50 [viewportWidth] [viewportHeight]'>
<g transform='translate(100 100)'>
<circle x='10' y='10'></circle>
</g>
</svg>