svg的视口和视框
什么是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