SVG viewBox: Exact order of translation and scaling

Question

I am struggling to understand exactly how min-x and min-y on viewBox works, from a technical standpoint (without metaphors).

T

Answer 1

1. In the picture, a gray rectangle is an infinite SVG canvas.

2. The green rectangle is the viewport that the user sees on its display.

3. The yellow rectangle is the virtual viewBox area through which the user looks at the viewport.

viewBox can move along the coordinate axes of the infinitesvg canvas as in the positive direction x-min> 0; y-min> 0 and in the negative direction-x-min; -y-min

Image processing svg

• Next comes the capture of a fragment of the SVG canvas, located under the viewBox.
• In the next step, the coordinate system of the viewBox is aligned with the origin of the coordinate system of the viewport. And the fragment captured by the viewBox image is passed back to the viewport.

• There is a process of negotiation and options are possible here:

  1. If min-x = 0 andmin-y = 0, the width and height of the viewports are equal, respectively, to the width and height ofviewBoxs, then the fragment image does not move or scale.
  2. If the viewBox is shifted to the right - min-x> 0, the image is shifted to the left. It is clear that by capturing an image to the right of the viewport and then combining it with the origin, we thereby shift the image to the left.
  3. If the viewBox is shifted below the viewports - min-y> 0, the image will go up.

Based on this, there are thoughts that you can implement horizontal and vertical parallax without using CSS,JavaScript. To do this, simply move the viewBox along the SVG canvas, as shown in the figure below. Click the Start button.