Graphic analysis of viewbox in SVG

svg There is one of them. viewbox attribute , Visual area , Is in the svg Take a small piece from , Zoom in to the whole svg Show .

This attribute is a little difficult to understand for beginners , Here's a simple example , It's easy to see .

1） Let's have one first svg, Width and height, everyone 300, Set the border ：

<svg width="300" height="300" style="border: 1px solid steelblue">
</svg>

Running effect ：

This is actually a 300*300 The rectangular .

2）svg Draw a rectangle inside ：

<svg width="300" height="300" style="border: 1px solid steelblue">
    <rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>

Running effect ：

3） Set up svg Of viewbox attribute ：

<svg width="300" height="300" style="border: 1px solid steelblue" 
    viewbox="105 55 60 60">
<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>

First analyze the principle , Let's see the effect , Above set viewbox The value of is ：105 55 60 60, The meaning of each parameter is as follows ：

105 Means relative to svg The abscissa of the upper left corner .
55 Means relative to svg The ordinate of the upper left corner .
60 Represents the width of the intercepted viewport .
60 Indicates the height of the intercepted viewport .
Schematic principle ：

4） Non proportional viewbox

above viewbox Width and height svg In equal proportion , If equal proportions , Then one side is placed on the largest .

<svg width="300" height="300" style="border: 1px solid steelblue" 
    viewbox="105 55 60 60">
<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>

Schematic principle ：