svg viewBox属性

时间：2013-03-11 10:12:19

标签： svg

我正在从其官方文件中学习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">

6 个答案:

答案 0 :(得分：71)

宽度和高度是<svg>的大小。 viewBox控制其内容的显示方式，以便viewBox =“0 0 1500 1000”将<svg>元素的内容缩小5倍（1500/300 = 5和1000/200 = 5）并且内容将是没有viewBox但是<svg>

的大小的1/5

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

答案 1 :(得分：17)

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

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

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

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

它的坐标转换。

我建议你学习一本像“SVG Essentials”这样的书，大约10美元，我从中粗略地引用了这个答案。

答案 2 :(得分：7)

默认

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

svg网格的“标尺”以像素为单位（svg中的所有形状都以像素为单位测量）

但是你想使用自己的单位，你可以使用viewBox attr：

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

这意味着：

横轴： 1500（您的宽度单位）= 300px =＆gt; 1（您的宽度单位）= 300 / 1500px = 1 / 5px

垂直轴： 1000（您的身高单位）= 200px =＆gt; 1（您的身高单位）= 200 / 1000px = 1 / 5px

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

与原点相比，它们的宽度缩放到1 / 5px（1/5＆lt; 1 =＆gt;缩小）。

与原点相比，它们的高度也缩放到1 / 5px（1/5＆lt; 1 =＆gt;缩小）

答案 3 :(得分：1)

主要：

      
  • viewBox属性与SVG中的 term视口紧密相关

缩写：

      
  • viewBox-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">

默认值：

      
  • units = 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

渲染：
在构造最终的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分钟，以了解上述原理：
video viewBox in SVG

文档：
W3C 2019 SVG 2 specification

答案 4 :(得分：0)

viewbox是一个比率

根据我的卑鄙经验，我一直认为image ratio的<svg>的{​​{1}}值适用于viewbox和width的值。在定义后面的版本时，我只需要处理DOM中的任何height，无论是内联HTML属性还是通过CSS，viewbox属性仅适用于SVG文件。

答案 5 :(得分：0)

这里有一些实用信息，对于理解SVG viewPort和viewBox（特别是与之配合使用）很有帮助。

SVG使用条款 viewPort和viewBox。 viewBox位于viewPort内部。 将viewBox视为图像本身 –因为您可以缩放它，所以可以在viewPort中向左/向右/向上/向下滑动。 viewPort（SVG标签本身）就像是SVG图像位于其中的容器。您也可以调整大小，然后左右/左右移动。 SVG标签位于HTML容器内（div，p，aside，h3等）。因此，您可以看到为什么人们发现viewPort / viewBox有点令人困惑。只需将viewBox视为图像本身即可。

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

因此，在SVG本身上，您指定宽度/高度和起始x偏移量/起始y偏移量-这些称为viewPort （又名ViewPort Coord System） 在viewBox属性中，指定“ x y width height” –称为viewBox（又称本地坐标系LCS）

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

重要概念1：viewPort 的宽度/高度（在SVG标签本身上，为width =“”和height =“”）指定容器的大小其中将显示SVG图像。通常，或者如果省略，则为SVG图片本身的确切大小（或稍大一点）。

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

viewBox x / y –将SVG在viewPort内部向右/向下滑动

viewBox的宽度/高度–当增大幅度大于SVG标签的宽度/高度时，它会将图像缩小到viewPort内部。 SVG在视口内向右/向下收缩。将数字减少到SVG宽度/高度属性以下：图像将在视口中增长，直到图像右侧/底部的部分可能被viewPort的右侧/底部截断。 *（即，当viewBox属性中的宽度/高度数字小于SVG上的width / height属性时，viewPort中的图像ZOOMS IN。较大时，图像通过viewPort缩小（缩小）。

viewPort x / y ==在HTML容器内向右/向下滑动视口 viewPort宽度/高度–将整个viewPort调整为更大的尺寸，可能会使HTML容器（div / p / etc）溢出。基本上，通过向右/向右增大viewPort来使其更大。

注释：
一种。如果未在SVG上包括ViewBox属性，则viewBox的大小等于viewPort的大小（占viewPort的100％）
b。如果viewBox以0,0开头，并且具有与SVG宽度/高度相同的宽度/高度（即viewPort），则不会发生任何变化。等同于根本没有viewbox属性。
C。如果您的viewPort大小为一副纸牌，但SVG图像为谷物盒的大小，那么增加viewBox的“ xy…”数字将使谷物盒图像在viewPort中向上/向左移动，从而显示出不同的谷物盒图像的一部分。这对于sprites
很有用 d。 （通常（总是！），SVG元素也位于HTML容器内-div，p，section，li等）。我们没有讨论过，但请记住。如果您的图像被剪下，则或者viewBox大于viewPort-或者-HTML容器元素（div等）小于viewPort）

以下是this answer within this same thread的作者向我们推荐的两个（非常好！）短片：

2min video demo
5min video demo (same guy, much better)

相关问题
最新问题