viewBox
上的 min-x
和 min-y
是如何工作的(不使用比喻语言)。
我已经花了很多时间查阅以下两个有用的资源:
- SVG 1.1(官方规范)- 7.7 视口属性(viewBox)
- 了解 SVG 坐标系统和变换(第 1 部分) - Sara Soueidan
根据SVG 1.1规范:
“viewBox”属性的值是由四个数字(,,和,之间可以用空格和/或逗号分隔)组成的列表,这些数字指定了用户空间中应该被映射到给定元素所建立的视口边界的矩形,考虑到“preserveAspectRatio”属性。
并且:
“viewBox”属性的效果是用户代理自动提供适当的转换矩阵,将用户空间中指定的矩形映射到指定区域(通常是视口)的边界。
并且:
(注意:在某些情况下,用户代理将需要提供一个翻译转换,以及一个比例变换。例如,在最外层的svg元素上,如果‘viewBox’属性指定除0和1之外的值,则需要一个平移变换或缩放变换。)
因此,我的期望是定义一个viewBox与以下步骤相同:
- 首先缩放视窗框,使其填充视口(假设视口和viewBox具有相同的纵横比)。
- 然后平移视窗框,依据
min-x
和min-y
viewBox属性将其放置在视口中。如果我们查看Sara的两个示例,从这里开始,似乎并不是这样发生的。
在她的第一个示例中(
<svg width="800" height="600" viewbox="100 100 200 150">...</svg>
),它看起来像:
- 根据
min-x
/min-y
在视口中放置viewBox- 将视口框缩放到与视口相同的大小
- 将viewBox原点平移(移动)以与视口原点重合
然而,在她的第二个示例中(
<svg width="800" height="600" viewbox="-100 -100 400 300">...</svg>
),它看起来是一个完全不同的顺序:
- viewBox被缩放到与视口相同的大小。
- viewBox原点以与
min-x
和min-y
相反方向的某种方式移动。它不与视口原点重合-这与第一个示例不同。因此,我认为我并不完全理解它,因为从技术上讲,它在两种情况下应该以相同的方式工作。
最后,在Sara的示例中,我不明白为什么蓝色坐标系(用户坐标系)本身不会在视口坐标系中移动到(100,100)或(-100,-100)。我认为viewBox应该平移和缩放用户坐标系?
编辑:
根据这个SO答案,
min-x
和min-y
确实遵循我的第一组步骤。 viewBox原点根据min-x
和min-y
放置在视口中,然后被翻译,使其原点位于视口原点上方。然后它被(之前或之后)缩放以填充视口。如果是这样,我很难理解为什么Sara的示例中蓝色用户坐标系不总是以其原点位于视口原点之上结束。毕竟,viewBox应该修改用户坐标系。
vb-
值),另一个在渲染器/浏览器中(e-
值),然后将画布中的每个图形内容绘制在渲染矩形中,使得 _矩形_“适合”,而不考虑内容。图形内容可以在画布的任何地方,因此可能出现在渲染器的任何地方。只有之后,所有渲染矩形之外的内容都被裁剪掉,里面的内容才是可见的。 - ccprog