SVG viewBox属性用法及代码示例

viewBox是HTML中SVG元素的属性。它用于缩放SVG元素，这意味着我们可以设置坐标以及宽度和高度。

用法:

viewBox = "min-x min-y width height"

属性值：

min-x:用于设置水平轴。它用于使SVG在水平轴(即左和右)上移动。
min-y:用于设置垂直轴。它用于使SVG在垂直轴(即上下)上移动。
width:用于设置视图框的宽度。
height:用于设置视图框的高度。

注意：字母“ B”在viewBox中为大写。

因此，借助这些值，我们可以缩放SVG向量并根据SVG元素的width和height属性中定义的值更改其方向(即使其向左，向右，顶部或底部)。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG viewBox Attribute</title> 
      
    <style type="text/css"> 
        svg { 
            border:1px solid #aaa; 
        } 
    </style> 
</head> 
  
<body> 
      
    <!-- Without viewBox -->
    <svg width="200" height="200"> 
        <circle cx="50" cy="50" r="45"
            stroke="#000" stroke-width="3"
            fill="none"/> 
    </svg> 
      
    <!-- With viewBox -->
    <svg width="200" height="200" viewBox="0 0 200 200"> 
        <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/> 
    </svg> 
</body> 
  
</html>

输出：

在这里，方形框显示了SVG的边框，并使用viewBox属性可以设置矢量的比例尺和平移。以上两个SVG元素的输出都相同。我们将SVG和viewBox的宽度和高度设置为相等(即200)，这样我们就得到了两个相同大小的圆。

width和height的值：使用width和height值，您可以更改SVG向量的大小。因此，如果我们要更改大小并将其增大，请在viewBox中将width和height的值设置为小于SVG元素的width和height属性。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG viewBox Attribute</title> 
      
    <style type="text/css"> 
        svg { 
            border:1px solid #aaa; 
        } 
    </style> 
</head> 
  
<body> 
  
    <svg width="200" height="200" viewBox="0 0 100 100"> 
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/> 
    </svg> 
</body> 
  
</html>

输出：

因此，现在，要更改SVG向量的大小并使其更小，我们必须在viewBox中设置width和height的值，大于SVG元素的width和height属性。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG viewBox Attribute</title> 
      
    <style type="text/css"> 
        svg { 
            border:1px solid #aaa; 
        } 
    </style> 
</head> 
  
<body> 
    <svg width="200" height="200" viewBox="0 0 300 300"> 
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/> 
    </svg> 
</body> 
  
</html>

输出：

向左移动：用正数设置x-min的值。它将在左侧移动SVG。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG viewBox Attribute</title> 
      
    <style type="text/css"> 
        svg { 
            border:1px solid #aaa; 
        } 
    </style> 
</head> 
  
<body> 
    <svg width="200" height="200" viewBox="50 0 100 100"> 
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/> 
    </svg> 
</body> 
  
</html>

输出：

向右移动：将x-min的值设置为负数。它将SVG移到右侧。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG viewBox Attribute</title> 
      
    <style type="text/css"> 
        svg { 
            border:1px solid #aaa; 
        } 
    </style> 
</head> 
  
<body> 
    <svg width="200" height="200" viewBox="-50 0 100 100"> 
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/> 
    </svg> 
</body> 
  
</html>

输出：

Top Move：将y-min的值设置为正数。它将在顶部移动SVG。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG viewBox Attribute</title> 
      
    <style type="text/css"> 
        svg { 
            border:1px solid #aaa; 
        } 
    </style> 
</head> 
  
<body> 
    <svg width="200" height="200" viewBox="0 50 100 100"> 
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/> 
    </svg> 
</body> 
  
</html>

输出：

下移：将x-min的值设置为负数。它将在底部移动SVG。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG viewBox Attribute</title> 
      
    <style type="text/css"> 
        svg { 
            border:1px solid #aaa; 
        } 
    </style> 
</head> 
  
<body> 
    <svg width="200" height="200" viewBox="0 -50 100 100"> 
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/> 
    </svg> 
</body> 
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自aakashpawar1999大神的英文原创作品 SVG viewBox Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。