85

我正在从它的官方文档中学习 svg，有这样一行。我不明白，如果它已经有一个widthandheight属性，那么在 中再次指定它有什么意义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">
4

7 回答 7

94

宽度和高度是多大<svg>。viewBox 控制其内容的显示方式，因此 viewBox="0 0 1500 1000" 会将元素的内容缩小<svg>5 倍（1500 / 300 = 5 和 1000 / 200 = 5），内容将为 1/ 5 没有 viewBox 但它们的大小<svg>

想象一下，您有一个弹性表面并将其切成 4 等份。如果你扔掉 3 块，你得到的表面是原始表面大小的 1/4。如果您现在拉伸曲面并使其与原始曲面大小相同，则曲面上的所有内容都将是两倍大小。这就是 viewBox 和宽度/高度的关系。

于 2013-03-11T10:31:41.147 回答
32

如果您不指定视图框，则元素中的所有无单位数字都假定为像素。（并且 SVG 假设 90 dpi 或每英寸像素用于从单位（如厘米）到像素的转换。）

视图框让您在元素中制作无单位数字意味着“用户单位”，并指定这些单位如何映射到大小。为简单起见，仅考虑 x 坐标，即标尺。您的视图框说您的标尺将有 1500 个单位来匹配 svg 的 200 像素大小宽度。

从 0 到 1500（无单位，即用户单位）的线元素将拉伸 200 个像素，即跨越 svg 绘图的宽度。

（而且由于 SVG 可以在不损失分辨率的情况下进行缩放，所以当用户放大或缩小时，像素在现实世界中的意义并不大。）

它是一种坐标变换。

我建议您从诸如“SVG Essentials”之类的书中学习，大约使用了 10 美元，我从中粗略地引用了这个答案。

于 2013-06-03T01:36:15.443 回答
31

默认情况下

<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/5 像素（1/5 < 1 => 缩小）。

与原点相比，它们的高度也缩放到 1/5px（1/5 < 1 => 缩小）

于 2017-12-30T05:56:58.737 回答
5

主要的：

  • viewBox 属性与SVG中的术语 viewport密切相关

缩写：

  • 视图框 - VB
  • 视口 - 副总裁
  • 视口坐标系 - 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_width
  • vb_height

RENDERING：
在构建最终的 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)]

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

文档：
W3C 2019 SVG 2 规范

于 2019-12-14T18:37:10.483 回答
3

以下是一些我认为有助于理解（尤其是使用）SVG viewPort 和 viewBox的实用信息。

SVG 使用术语viewPort 和 viewBox。viewBox 位于 viewPort 内。将 viewBox 视为图像本身——因为您可以缩放它，向左/向右/向上/向下滑动它——所有这些都在 viewPort 内。viewPort（SVG 标签本身）就像一个容器，里面有 SVG 图像。你也可以调整它的大小，并左右移动它左/右/上/下。并且 SVG 标记位于 HTML 容器中（div、p、aside、h3 等）。所以你可以看到为什么人们会觉得 viewPort / viewBox 有点混乱。只需将 viewBox 视为图像本身。

SVG 标签上的宽度/高度属性提供了视口的大小。这是显示 SVG 图像的容器的宽度/高度。（您也可以拥有x=""和y=""属性，就像在 viewBox 属性中一样。）

因此，在 SVG 本身上，您指定宽度/高度和起始 x 偏移量/起始 y 偏移量——这些称为 viewPort （也称为 ViewPort 坐标系统） 在 vi​​ewBox 属性中，您指定“xy 宽度高度”——这些称为 viewBox （又名本地坐标系统 LCS）

<svg x="0" y="0" width="500" height="300"
  viewBox="start_x  start_y  width  height" >
  ...path fill d etc...
</svg>

重要概念 #1：视口的宽度/高度（在 SVG 标签本身上的宽度/高度，如 width="" 和 height=""）指定将显示 SVG 图像的容器的大小。通常，或者如果省略，这是与 SVG 图像本身一样的大小（或稍大一点）。

超级重要的概念 #2：viewBox的宽度/高度与 viewPort 的宽度/高度直接相关。如果 viewPort 是 300 x 500，那么当 viewBox W / H数字变得大于 300 x 500 时，图像本身在 viewPort 内变得更小（缩小）。但是随着 viewBox w/h 变得小于 300 x 500，图像本身在 viewPort 内变得更大。这种增长是向右和向下的，所以如果你需要在现在太小的视口中左右滑动放大的图像，那就是当你使用 viewBox 的X/Y值时。

viewBox x/y – 在视口内向右/向下滑动 SVG

viewBox 宽度/高度——当增加大于 SVG 标签的宽度/高度时，它会在 viewPort 内缩放图像。SVG 在视口内向右/向下收缩。减少 SVG 宽度/高度属性下方的数字：图像将在视口中增长，直到右侧/底部的图像部分可能被视口的右侧/底部截断。*（即当 viewBox 属性中的宽度/高度数字小于 SVG 上的宽度/高度属性时，图像会在 viewPort 内放大。当更大时，图像会随着 viewPort 缩小（缩小）。

viewPort x/y == 在其 HTML 容器 viewPort 宽度/高度内向右/向下滑动视口本身 - 将整个 viewPort 的大小调整得更大，可能会溢出 HTML 容器（div / p / 等）。基本上，通过向右/向下增长来使视口变大。

备注：
一。如果在 SVG 上不包含 ViewBox 属性，则 viewBox 的大小等于 viewPort 的大小（占 viewPort 的 100%）
b. 如果 viewBox 开始0,0并具有与 SVG 宽度/高度（即视口）相同的宽度/高度，则不会发生任何变化。相当于根本没有 viewbox 属性。
C。如果您有一个纸牌大小的视口，但 SVG 图像是谷物盒的大小，则增加 viewBox “xy ...”数字将在视口中向上/向左移动谷物盒图像，显示谷物盒图像的不同部分。这对精灵 很有用
d.（通常（总是！）SVG 元素也在 HTML 容器中 - 一个 div、p、section、li 等等。我们没有讨论这个，但请记住它。如果您的图像被截断，那么 viewBox大于视口 - 或 - HTML 容器元素（div 等）小于视口）

这里有两个（非常棒！）短视频，由这个答案的作者在同一个线程中推荐给我们：

2 分钟视频演示
5 分钟视频演示（同样的人，好多了）

于 2020-12-03T00:13:19.400 回答
0

viewbox是一个比率

以我卑微的经验，我一直认为<svg>'s 的值是应用到和值viewbox所需的图像比例。在定义后者时，我只使用DOM 中的任何内容，无论是内联 HTML 属性还是通过 CSS，viewbox 属性仅适用于 SVG 文件。widthheight<img>

于 2020-10-19T18:46:35.730 回答
0

这是说明宽度、高度和 viewBox 之间关系的一种非技术方式：

如果您的计算机上有任何尺寸为 的旧图像1500 x 1000，并且您捏住图像的一角并将其调整为300 x 200，则图像会缩小或按比例缩小（假设启用了缩放）。反之亦然。

一个好的经验法则是始终先查看 viewBox 的宽度和高度，然后将其与 SVG 的宽度和高度（或父级的宽度和高度，如果它们未在 SVG 中声明）进行比较。这样您就可以判断 SVG 图像是放大（增长）还是缩小（缩小）。

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

以上是告诉浏览器您有一个 SVG，1500 x 1000但您希望它“捏住角落”并将其缩小为300 x 200.

于 2022-02-24T04:48:32.657 回答