svg的视口和视框

Viewport很好理解,就像我们的电视机,只能看到电视机内部的内容,看不到电视屏幕外的画面。

什么是viewbox?你看文件会有很多答案,但我觉得把握一个基本概念就够了。

Viewbox是我们最终绘图的坐标系,也就是说我们在svg上画东西的时候,最终的位置是根据viewbox的坐标系来确定的。

为什么viewbox这么难理解?

其实我看了很多文章,但是一点都不清楚。关于svg本质的书也是雾里看花,不知所云。

我觉得可以从以下几点来理解。

视图框的定义

当viewbox的纵横比与viewport的纵横比相同时,先设置用户坐标,然后进行绘制。

相同的纵横比意味着svg设置的width: height等于viewbox设置的width: height。

例如

这里svg的长宽比为400: 200 = 2。

viewbox设置的长宽比是200: 100 = 2。

所以这里的长宽比是一样的。

表现如下

渲染过程

svg视口的宽度和高度分别为800和600。

视景框的设置宽度和高度分别为0 . 0 800 600。

这里用户的坐标是1:1,即用户坐标的一个像素对应视口的1个像素。

所以结果如图所示

表现如下

渲染过程

Svg的视口宽度和高度仍然是800和600。

viewbox的纵横比变为0 0 400 300。

这里第一步是确定用户坐标,因为设置的用户坐标是400 * 300,而实际的视口是800和600,所以用户坐标对应的1像素对应的是视口的两个像素。

因此,在绘制图像时,当视框为0 0 800 600时,对应视口的物理像素最初位于用户坐标为100和100的点处,但当视框为0 0 400 300时,用户坐标为65438+。

这里注意,无论是100、100还是100、100,所绘制的图像的坐标从未改变。改变的是从用户坐标到svg视口的转换。

上面介绍了viewbox的宽度和高度,长宽比与viewport相同时,现在我们来介绍长宽比与viewport相同时viewbox的X和Y是如何变化的。

其实原理是一样的,还是分两步走。

a、首先设置用户坐标,即用户坐标和svg视口之间的转换关系,

b .绘制图像

表现如下

可以看到图像向左移动了150px。

原理还是按照上面两个步骤。

1,首先设置用户坐标,svg为800: 600,viewbox为800:600。

所以这里的用户坐标是1:1,然后这里的用户坐标会因为设置了viewBox的x而向左移动150,所以无法显示原来画在(0,0)到(150,0)用户坐标范围内的用户坐标。

当宽度和高度不同时,首先要有一个标准,即根据什么来设置用户坐标到viewport的转换,即preserveAspectRatio。

这个长时间不太好理解,不如直接看实际效果图。

/demos/interactive-SVG-coordinate-system/index . html

可以直接在这里设置,看看效果。

但是把握大方向

就是先设置用户坐标,然后再画。

参考:/2017/03/svg.html