Front-end learning: SVG viewbox understanding

This article mainly understands viewprot and viewbox in svg;

Front-end learning: SVG viewbox understanding

<svg class="logo" width="100" height="100" viewBox="10 0 50 50">
在页面中定义一个 宽100 高100 的窗口,也就是viewport;

viewbox="x, y, width, height"
  width: viewbox的宽度
  height: viewbox的高度

The larger the x, the leftward the image position, the larger the y, the higher the image position. Here we need to pay attention to the size of the viewport window we set, the image will not be displayed after the window is exceeded.
(Image: it is the content drawn in the path, here is the twitter icon)

<svg width="100" height="100" viewbox="0 0 50 50"></svg>

1:在 宽100 高100的区域 中 左上角 (0 , 0 )坐标处为顶点,画出一个 50 * 50 的 viewbox;
2:将viewport 中 宽50 高50 的内容截图;
3:把截图的图像平铺显示在 宽100 高100 的 viewprot中。

Seeing this, we can understand why it says: "The larger the x, the more left the image position"; because x is the abscissa, the larger the x, the more right the screenshot area, the more the image is displayed in the screenshot area. To the left, so the position of the image displayed in the viewprot is more to the left.

Front-end learning: SVG viewbox understanding

As shown in the figure, 100 * 100 in the display area is the window size of the viewport.

当设置 viewbox中的 width 和 height 越大时,图像显示越小,因为所画图像在页面中显示的比例是一定的,当截取的宽度和高度越大,图像在viewbox中的比例就越小,显示的内容就越小。
不管width和height怎么设置,图像都是保持比例的。设置 坐标和宽高只能移动图像位置和缩放比例,不能改变图像。

Guess you like