SVG viewBox:转换和缩放的确切顺序 [英] SVG viewBox: Exact order of translation and scaling

问题描述

从技术的角度(没有隐喻)，我正在努力确切地理解viewBox上的min-x和min-y是如何工作的.

I am struggling to understand exactly how min-x and min-y on viewBox works, from a technical standpoint (without metaphors).

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

Two helpful resources I have spent quite a lot of time on:

• SVG 1.1 (正式规范)-"viewBox"属性
• 了解SVG坐标系和转换(第1部分)-萨拉Soueidan

• SVG 1.1 (official specification) - 7.7 The ‘viewBox’ attribute
• Understanding SVG Coordinate Systems and Transformations (Part 1) - by Sara Soueidan

根据 SVG 1.1规范:

"viewBox"属性的值是四个数字的列表 ，，和，由空格和/或分隔 一个逗号，它在用户空间中指定一个矩形，该矩形应为 映射到给定元素建立的视口的边界， 考虑属性"preserveAspectRatio".

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’.

并且:

"viewBox"属性的作用是用户代理 自动提供适当的变换矩阵以进行映射 用户空间中指定矩形到指定边界的距离 区域(通常是视口).

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).

并且:

(注意:在某些情况下，用户代理将需要提供翻译 规模转换之外的其他转换.例如，在 最外层的svg元素，如果需要，则需要转换转换 "viewBox"属性为的值指定了非零值 或.)

(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与以下内容相同:

So, my expectation was that defining a viewBox is the same as:

1. 首先缩放视图框，以使其填充视口(假设视口和viewBox的宽高比相同)
2. 然后翻译视图框，以便根据min-x和min-y viewBox属性将其放置在视口中.

1. First scaling the viewbox, so it fills the viewport (assuming same aspect ratio on viewport and viewBox)
2. Then translating the viewBox, so it is placed in the viewport according to min-x and min-y viewBox attributes.

如果我们看一下Sara的两个例子，从这里开始，这似乎没有发生.

If we look at Sara's two examples, starting here, that is not what seems to be happening.

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

In her first example (<svg width="800" height="600" viewbox="100 100 200 150">...</svg>), it looks like:

1. viewBox根据min-x/min-y放置在视口中
2. viewBox已被缩放，使其尺寸与视口相同
3. viewBox原点已进行翻译(已移动)以与视口原点一致

1. viewBox is placed according to min-x / min-y in viewport
2. viewBox is scaled to same size as viewport
3. viewBox origin is translated (moved) to coincide with viewport origin

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

In her second example however (<svg width="800" height="600" viewbox="-100 -100 400 300">...</svg>), it looks like a completely different order:

1. viewBox已被缩放，使其尺寸与视口相同
2. viewBox的原点在 min-x min-y指示的相反方向上进行了翻译(移动).它与视口原点不一致-这与第一个示例不同

1. viewBox is scaled to same size as viewport
2. viewBox origin is translated (moved) somehow in the opposite direction of what viewBox min-x min-y indicates. It does not coincide with viewport origin - This is different from the first example

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

Thus, I recognize that I do not fully understand it, because technically it should work the same way in both cases.

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

Finally, in Sara's examples, I do not understand why the blue coordinate system (user coordinate system) does not itself move, to (100, 100) or (-100, -100) in viewport coordinate system. I thought viewBox was supposed to translate and scale the user coordinate system?

根据

According to this SO answer, min-x and min-y does indeed follow my first set of steps. The viewBox origin is placed in the viewport according to min-x and min-y, and then translated so its origin is on top of viewport origin. It is then (before or after) scaled to fill viewport.

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

If that is correct, I have a hard time understanding why the blue user coordinate system in Sara's examples do not always end up with its origin on top of viewport origin. After all, viewBox should modify the user coordinate system.

推荐答案

x轴上坐标viewBox的原点的偏移量(min-x=70px)

<svg width="400" height="400" viewBox="70px, 0, 400px, 400px">

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

In the figure, the origin of user coordinates shifts to the right by 70px, thereby shifting the entire rectangular viewing areaviewBox (400 x 400px)to the right along the horizontal axis.

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

When this happens, the image of the SVG document fragment that is under the viewBox is captured and then the viewBox viewing area with the captured fragment is back aligned with the fixed user viewport area with the origin (0,0) in the upper left corner.

重新计算图形的坐标，最后一次向左移动70px.正式证明，在应用viewBox时，在视口的固定视区中，SVG文档的片段已向左移动.

The coordinates of the figures are recalculated with the last shift of 70px to the left. Formally it turns out that in the fixed viewing area of the viewport when applying the viewBox the fragment of the SVG document has shifted to the left.

实时演示

viewBox的原点沿两个轴的偏移量

min-x=70px, min-y="70px"

<svg width="400" height="400" viewBox="70px, 70px, 400px, 400px">

为清楚起见，在图片底部添加另一个红色矩形-6

For clarity, add another red rectangle at the bottom of the picture - 6

将原点传输到viewBox之后，具有从原点开始的宽度和高度计数(70.70)的矩形400 × 400 px SVG文档片段将进入viewBox.

After transferring the origin to the viewBox, a rectangular 400 × 400 px SVG document fragment with a width and height count from the origin (70.70) gets into the viewBox.

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

Image capture occurs. Next, the origin of the viewBox (70,70) is combined with the origin of the viewport (0,0). The coordinates of the figures are recalculated.

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

Therefore, red rectangles 5 and 6 become fully visible. Everything that does not fall into this area is cut off. For example, part of the areas of colored circles 1,2 and 4.

实时演示

SVG文档片段的比例取决于宽高比:viewport和viewBox

The scale of the SVG document fragment depends on the aspect ratio: viewport andviewBox

如果viewport/viewBox = 1，则比例尺将为1

If viewport /viewBox = 1, then the scale will be 1

如果viewport/viewBox不等于1，则刻度将沿增大或减小的方向变化.

If viewport /viewBox different from one, the scale will change in the direction of increase or decrease.

比例的增加如何解释下图

How does the increase in scale explains the figure below

一个像素viewBox延伸到两个像素viewport

One pixel viewBox stretches to two pixelsviewport

实时演示

缩小svg图片1:2

<svg width="400" height="400" version="1.1" viewBox="0 0 800 800">

<svg width="400" height="400" version="1.1" viewBox="0 0 800 800">

viewport / viewBox = 1/2

viewBox捕获矩形片段800 x 800 px，即SVG视口400 x 400 px的整个范围以及在视口的右侧和底部各有一个400px.

The viewBox captures a rectangular fragment 800 x 800 px, that is, the entire scope of the SVG viewport 400 x 400 px and an additional 400px each on the right and bottom of the viewport.

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

That is two pixels of the viewBox are compressed into one pixel of the viewport. Therefore the SVG image is reduced by half.

实时演示

这篇关于SVG viewBox:转换和缩放的确切顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！