svg viewBox属性

Question

我正在从其官方文件中学习svg,有这样的路线.我不明白,如果它已经有一个width和height属性,什么是在再次指定的地步viewBox="0 0 1500 1000"？据说,"一个px单位被定义为等于一个用户单位.因此,"5px"的长度与官方文档中"5""的长度相同,因此这个viewBox的宽度为1500px, 1000高度视图,超过300px和200px.那么为什么它首先定义宽度和高度值？

 <svg width="300px" height="200px" version="1.1"
         viewBox="0 0 1500 1000" preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">

Answer 1

宽度和高度是多大<svg>.viewBox控制其内容的显示方式,以便viewBox ="0 0 1500 1000"将<svg>元素的内容缩小5倍(1500/300 = 5和1000/200 = 5),内容为1/5他们没有viewBox的大小但是<svg>

想象一下,你有一个弹性表面,并将其切成4个相等的块.如果你扔掉3件,你的表面尺寸是原始表面的1/4.如果现在拉伸表面并使其与原始表面的尺寸相同,那么表面上的所有内容都将是两倍大小.这就是viewBox和width/height相关的方式.

Answer 2

如果未指定视图框,则假定元素中的所有无单位数字都是像素.(并且SVG假定从dcm到像素的单位转换为90 dpi或每英寸像素.)

使用视图框可以使元素中的无单位数字表示"用户单位",并指定这些单位如何映射到该大小.为简单起见,只考虑x坐标,即标尺.您的视图框表示您的标尺将有1500个单位来匹配svg的200像素大小宽度.

从0到1500的线元素(无单位,即用户单位)将绘制200个像素,即跨越svg绘图的宽度.

(并且由于SVG可以在不损失分辨率的情况下进行扩展,因此当用户放大或缩小时,像素在现实世界中并没有多大意义.)

它是一种坐标变换,各种各样.

我建议你从像"SVG Essentials"这样的书中学习,大约10美元,我从中粗略地引用了这个答案.

Answer 3

默认情况下

<svg width="300" height="200">

svg网格的"标尺"是像素(svg中的所有形状都是以像素为单位测量的)

但是你想使用自己的单位,你可以使用viewBox attr:

<svg width="300" height="200" viewBox="0 0 1500 1000">

这意味着:

水平轴: 1500(您的宽度单位)= 300px => 1(您的宽度单位)= 300/1500px = 1/5px

垂直轴: 1000(您的高度单位)= 200px => 1(您的高度单位)= 200/1000px = 1/5px

• 现在svg中的所有形状都会缩放:

与原点相比,它们的宽度缩放到1/5px(1/5 <1 =>缩小).

与原点相比,它们的高度也可以缩放到1/5px(1/5 <1 =>缩小)

Answer 4

主要的：

• 该viewBox属性密切相关的术语视在SVG

缩写：

• 视图框 - VB
• 视口 - VP
• 视口坐标系 - VCS
• 局部坐标系 - LCS

句法：

<svg x = "VP_min_X" y = "VP_min_Y" width = "VP_width" height = "VP_height"
viewBox = "VB_min_X VB_min_Y VB_width VB_height">

默认值：

• 单位 = px
• 视口宽度 = 300
• 视口宽度 = 150
• viewBox = 视口

具有默认值的代码

<svg>

结果相同的代码：

<svg x = "0" y = "0" width = "300" height = "150" viewBox = "0 0 300 150">

视口设置：视口坐标系 (VCS) 的原点：

• VP_min_X
• VP_min_Y

在最外面的视口的情况下，这些值无关紧要并且在任何情况下都等于 0，它们通常被省略：

<svg width = "100" height = "150">

具有相同结果的代码：（对于最外部的视口）：

<svg x = "10" y = 20 "width ="100 "height ="150">

嵌套
视口：在嵌套视口 (VP_min_X, VP_min_Y) 中定义从 VCS 原点开始的缩进：

<svg width="100%" height="100%"> <!-- external viewport = full browser size -->
     <svg x="50" y="100" width="200" height="300" viewBox="0 0 100 100">
     </svg>
</svg>

在这种情况下，嵌套视口的缩进：
从外部 VCS 的原点沿 X 轴缩进50 像素，沿 Y 轴缩进 100像素。

将在其中绘制 SVG 图形的矩形区域（视口）的尺寸确定：

• VP_width
• VP_height

VIEWBOX 设置：
本地坐标系 (LCS) 的原点：

• Vb_min_X
• Vb_min_y

SVG 图像可见部分的大小：

• 宽度
• vb_height

渲染：
在构建最终的 SVG 图像时，坐标系通过 COMBINING 进行转换：
坐标系的原点：

• VCS (VP_min_X, VP_min_Y)
• LCS (VB_min_X, VB_min_Y)

可见图像区域的端点：

• VCS (VP_width, VP_height)
• LCS (VB_width, VB_height)

能力：
因此，可以控制：

• 视口在浏览器窗口中的位置[使用嵌套视口并更改 (VP_min_X, VP_min_Y)]
• 视口尺寸（VP_width、VP_height）
• 平移图像的可见部分 [使用 viewBox 并更改 (VB_min_X, VB_min_Y)]
• 缩放图像的可见部分 [使用 viewBox 并更改 (VB_width, VB_height)]

可视化： 2 分钟在 YouTube 上了解上述原理：
SVG 中的视频视图框

文档：
W3C 2019 SVG 2 规范