SVGThere is a viewBoxconcept. And to explain this concept, we need to look at an example.
<svg height="800" width="600" viewBox="0 0 60 80" style="border:1px solid #ff0000">
<rect height="40" width="30" fill="#abcdef"/>
</svg>
The first is svgwithin the tag height, widthattribute, obviously, this is used to define the svgimage width and height attributes. Without explicit write unit, and the unit is pixels (PX) .
Then the styleproperty, familiar HTMLand CSSfriends to see where you can find this familiar taste, do not repeat them.
Finally is the viewBoxproperty, which is also called "the viewport box." It can be svgunderstood as a computer screen, and viewBoxthat a block region on the screen, its own position and the width and height attributes .Provided that the effect will be the final property viewBoxis stretched to full screen. Obviously, viewBoxthe element will be amplified in
。
viewBoxThe syntax to the above code, for example, viewBox="0 0 60 80". Left to right are (coordinate origin is svgthe upper left corner), the top left abscissa, ordinate the upper left corner, width, height .
for example:
There is also a problem, as in the above code, the actual width and height of the final out of the box displays how much is it?
The answer is the width 600px, height 400px .
This is because the viewBoxfinal will be stretched to full screen. Therefore, viewBoxthe width and height are stretched many times, viewBoxthe elements will be stretched in many times. which is:
Can be seen that viewBoxthe width and height are stretched by 20 times, then only need to viewBoxwidth and height of the elements are multiplied by 20 to obtain the actual width and height.