SVG viewBox:翻译和缩放的准确顺序

Question

我努力理解究竟如何min-x,并min-y在viewBox作品中,从技术角度看(不含比喻).

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

• SVG 1.1(官方规范) - 7.7'viewBox'属性
• 理解SVG坐标系和转换(第1部分) - 作者:Sara Soueidan

根据SVG 1.1规范:

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

和:

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

和:

(注意:在某些情况下,除了缩放转换之外,用户代理还需要提供转换转换.例如,在最外层的svg元素上,如果'viewBox'属性指定的值不是零,则需要转换转换.要么 .)

所以,我的期望是定义一个viewBox与:

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

如果我们看看Sara的两个例子,从这里开始,那不是正在发生的事情.

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

1. viewBox根据min-x/ min-y在视口中放置
2. viewBox 缩放到与视口相同的大小
3. viewBox原点被翻译(移动)以与视口原点重合

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

1. viewBox 缩放到与视口相同的大小
2. viewBox原点以某种方式被转换(移动),与viewBox min-x min-y指示的方向相反.它与视口原点不一致 - 这与第一个示例不同

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

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

---

编辑:

根据该SO回答,min-x并min-y确实按照我的第一组步骤.viewBox原点根据min-x和放置在视口中min-y,然后进行平移,使其原点位于视口原点的顶部.然后(缩放之前或之后)填充视口.

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

Answer 1

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

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

在该图中,用户坐标的原点向右70px移动,从而viewBox (400 x 400px)沿着水平轴向右移动整个矩形观察区域.

当发生这种情况时,viewBox捕获位于其下的SVG文档片段的图像,然后将具有捕获的片段的viewBox查看区域与固定的用户视口区域对齐,其中左上角的原点(0,0).

重新计算图形的坐标,向左移动70px.事实证明,在应用viewBox时,在视口的固定查看区域中,SVG文档的片段已向左移动.

现场演示

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)的原点与视口(0,0)的原点组合.重新计算数字的坐标.

因此,红色矩形5和6变得完全可见.不属于这个区域的一切都被切断了.例如,彩色圆圈1,2和4的部分区域.

现场演示

使用viewBox进行缩放

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

如果是viewport/ viewBox= 1,则比例为1

如果viewport/ viewBox不同于1,则比例将在增加或减少的方向上改变.

规模的增加如何解释下图

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

现场演示

缩小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视口的整个范围400 x 400 px和附加的400px每个视口的右边和底部.

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

现场演示