【发布时间】：2018-12-02 16:37:42
【问题描述】：
从技术角度（没有隐喻），我很难准确理解viewBox 上的min-x 和min-y 的工作原理。
我花了很多时间在两个有用的资源上：
- SVG 1.1（官方规范）-7.7 The ‘viewBox’ attribute
- Understanding SVG Coordinate Systems and Transformations (Part 1) - 由 Sara Soueidan 撰写
‘viewBox’属性的值是一个由四个数字组成的列表 , , and , 用空格和/或分隔 一个逗号，它指定用户空间中的一个矩形，它应该是 映射到给定元素建立的视口边界， 考虑到属性“preserveAspectRatio”。
还有：
‘viewBox’属性的作用是用户代理 自动提供适当的变换矩阵来映射 用户空间中的指定矩形到指定的边界 区域（通常是视口）。
还有：
（注意：在某些情况下，用户代理需要提供翻译 除了规模转换之外的转换。例如，在 最外层的 svg 元素，如果 “viewBox”属性指定非零值 或。）
所以，我的期望是定义 viewBox 与以下内容相同：
- 首先缩放视图框，使其填充视口（假设视口和视图框的纵横比相同）
- 然后翻译 viewBox，所以根据
min-x和min-yviewBox属性放在视口中。
如果我们看一下 Sara 的两个例子，starting here，这似乎不是正在发生的事情。
在她的第一个示例 (<svg width="800" height="600" viewbox="100 100 200 150">...</svg>) 中，它看起来像：
- viewBox在视口中根据
min-x/min-y放置 - viewBox 被缩放到与视口相同的大小
- viewBox 原点被翻译（移动）以与视口原点重合
然而，在她的第二个示例 (<svg width="800" height="600" viewbox="-100 -100 400 300">...</svg>) 中，它看起来完全不同：
- viewBox 被缩放到与视口相同的大小
- viewBox 原点被翻译（移动）不知何故与 viewBox
min-xmin-y所指示的方向相反。它与视口原点不一致 - 这与第一个示例不同
因此，我承认我并不完全理解它，因为从技术上讲，它在两种情况下的工作方式应该相同。
最后，在 Sara 的示例中，我不明白为什么蓝色坐标系（用户坐标系）本身不会移动到视口坐标系中的 (100, 100) 或 (-100, -100)。我认为 viewBox 应该 translate 和 scale 用户坐标系？
编辑：
根据this SO answer、min-x 和min-y 确实遵循我的第一组步骤。 viewBox 原点根据min-x 和min-y 放置在视口中，然后进行平移，使其原点位于视口原点之上。然后（之前或之后）缩放以填充视口。
如果这是正确的，我很难理解为什么 Sara 示例中的蓝色用户坐标系并不总是以其原点位于视口原点之上。毕竟viewBox要修改用户坐标系。
【问题讨论】：
-
SVG 2 规范对equivalent transform of a SVG viewport 有正式定义。
-
@ccprog 很有意思，我研究了一下。这是否意味着由 viewBox 创建的新用户坐标系总是紧贴任何后代图形元素（假设图形的 x/y 坐标为 0）？
-
没有。该算法定义了两个矩形：一个在无限画布中（
vb-值），一个在渲染器/浏览器中（e-值），然后在渲染矩形中绘制画布中的每个图形内容，使得 矩形“适合”，不考虑内容。涂鸦内容可以在画布中的任何地方，因此可以在渲染器中的任何地方结束。只有在渲染矩形之外的所有内容都被切掉之后，里面的所有内容都是可见的。 -
@ccprog 知道了。让我感到困惑的是 Sara 的蓝色坐标系（请参阅 OP 中的链接）。假设 viewBox 矩形从 (-100, -100) 开始。当该 viewBox 矩形映射到视口（渲染矩形）时，viewBox 矩形的原点被平移（移动）到与视口的原点（渲染矩形）重叠。但是，Sara 的蓝色坐标系与其内容的边缘之间没有空间（参见 viewbox="-100 -100 400 300 示例）。因此，我们的 viewBox 矩形与她的用户坐标系不匹配。
-
@ccprog 更简单的说，将 vb-x/y 设置为 (100, 100) 并不意味着用户坐标系从视口的 100, 100 开始。相反，当 viewBox 矩形映射到视口时，用户坐标系只是沿着（固定在其内容周围）标记，在映射完成后结束。
标签： svg