SVG View 框 : Exact order of translation and scaling

Question

我很难准确理解 min-x和 min-y在 viewBox作品，从技术角度来看(没有隐喻)。

我花了很多时间在两个有用的资源上:

SVG 1.1 (官方规范)- 7.7 The ‘viewBox’ attribute

Understanding SVG Coordinate Systems and Transformations (Part 1) - 萨拉 Soueidan

根据SVG 1.1 specification :

The value of the ‘viewBox’ attribute is a list of four numbers , , and , separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute ‘preserveAspectRatio’.

和:

The effect of the ‘viewBox’ attribute is that the user agent automatically supplies the appropriate transformation matrix to map the specified rectangle in user space to the bounds of a designated region (often, the viewport).

和:

(Note: in some cases the user agent will need to supply a translate transformation in addition to a scale transformation. For example, on an outermost svg element, a translate transformation will be needed if the ‘viewBox’ attributes specifies values other than zero for or .)

所以，我的期望是定义一个 viewBox 是一样的:

第一缩放 视框，所以它填充视口(viewport)(假设视口(viewport)和 View 框的纵横比相同)

那么翻译 viewBox，所以根据 min-x 放置在视口(viewport)中和 min-y View 框属性。

如果我们看一下 Sara 的两个例子，starting here ，这似乎不是正在发生的事情。

在她的第一个示例 (<svg width="800" height="600" viewbox="100 100 200 150">...</svg>) 中，它看起来像:

viewBox 根据 min-x 放置/min-y在视口(viewport)中

View 框是 缩放 与视口(viewport)大小相同

viewBox 原点是 翻译 (移动)与视口(viewport)原点重合

然而，在她的第二个示例(<svg width="800" height="600" viewbox="-100 -100 400 300">...</svg>)中，它看起来像一个完全不同的顺序:

View 框是 缩放 与视口(viewport)大小相同

viewBox 原点是 翻译 (移动)不知何故与 viewBox min-x 的方向相反min-y表示。它与视口(viewport)原点不一致 - 这与第一个示例不同

因此，我承认我并不完全理解它，因为从技术上讲，它在两种情况下都应该以相同的方式工作。

最后，在 Sara 的示例中，我不明白为什么蓝色坐标系(用户坐标系)本身不会移动到视口(viewport)坐标系中的 (100, 100) 或 (-100, -100)。我认为 viewBox 应该翻译和缩放用户坐标系？

编辑:

根据this SO answer , min-x和 min-y确实遵循我的第一组步骤。 viewBox 原点根据 min-x 放置在视口(viewport)中和 min-y ，然后翻译，使其原点位于视口(viewport)原点之上。然后(之前或之后)缩放以填充视口(viewport)。

如果这是正确的，我很难理解为什么 Sara 示例中的蓝色用户坐标系并不总是以其原点位于视口(viewport)原点之上。毕竟viewBox应该修改用户坐标系。

Answer 1

坐标原点的偏移量viewBox在 x 轴上 (min-x=70px)
<svg width="400" height="400" viewBox="70px, 0, 400px, 400px">


图中用户坐标原点右移70px ，从而移动整个矩形查看区域viewBox (400 x 400px)沿水平轴向右。

发生这种情况时，viewBox 下的 SVG 文档片段的图像被捕获，然后带有捕获片段的 viewBox View 区域与固定的用户视口(viewport)区域向后对齐，原点 (0,0) 在左上角。

图形的坐标重新计算，最后一次向左移动 70px。事实证明，当应用 viewBox 时，在视口(viewport)的固定查看区域中，SVG 文档的片段已向左移动。



Live Demo

viewBox 原点沿两个轴的偏移量
min-x=70px, min-y="70px"<svg width="400" height="400" viewBox="70px, 70px, 400px, 400px">
为清楚起见，在图片底部添加另一个红色矩形 - 6


将原点转移到 viewBox 后，一个矩形 400 × 400 px从原点 (70.70) 开始计算宽度和高度的 SVG 文档片段进入 viewBox。

发生图像捕获。接下来，将 viewBox 的原点 (70,70) 与视口(viewport)的原点 (0,0) 组合在一起。重新计算图形的坐标。



因此，红色矩形 5 和 6 变得完全可见。所有不落入该区域的东西都会被切断。例如，彩色圆圈 1,2 和 4 的部分区域。

Live Demo

使用 viewBox 进行缩放

SVG 文档片段的大小取决于纵横比:viewport和 viewBox
如果 viewport/viewBox = 1 ，则比例为 1
如果 viewport/viewBox与一不同，刻度会在增加或减少的方向上变化。



比例增加如何解释下图

一个像素viewBox拉伸(stretch)到两个像素 viewport


Live Demo

缩小 svg 图片 1: 2
<svg width="400" height="400" version="1.1" viewBox="0 0 800 800">viewport / viewBox = 1/2

viewBox捕获一个矩形片段 800 x 800 px ，即 SVG 视口(viewport)的整个范围 400 x 400 px和一个额外的400px每个都在视口(viewport)的右侧和底部。



即 viewBox 的两个像素被压缩成 viewport 的一个像素.因此 SVG 图像减少了一半。

Live Demo