内容表

• 范例
• marker
• pattern
• svg
• symbol
• view
• 规范

viewBox

1. SVG 元素

   1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
   2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
   3. D
      1. <defs>
      2. <desc>
   4. E
      1. <ellipse>
   5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
   6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
   7. H
      1. <hkern>
   8. I
      1. <image>
   9. J-L
      1. <line>
      2. <linearGradient>
   10. M
       1. <marker>
       2. <mask>
       3. <metadata>
       4. <missing-glyph>
       5. <mpath>
   11. N-P
       1. <path>
       2. <pattern>
       3. <polygon>
       4. <polyline>
   12. Q-R
       1. <radialGradient>
       2. <rect>
   13. S
       1. <script>
       2. <set>
       3. <stop>
       4. <style>
       5. <svg>
       6. <switch>
       7. <symbol>
   14. T
       1. <text>
       2. <textPath>
       3. <title>
       4. <tref>
       5. <tspan>
   15. U
       1. <use>
   16. V-Z
       1. <view>
       2. <vkern>

viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

值对于 viewBox attribute is a list of four numbers: min-x , min-y , width and height . The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport ).

You can use this attribute with the following SVG elements:

• <marker>
• <pattern>
• <svg>
• <symbol>
• <view>

范例

html,body,svg { height:100% }
svg:not(:root) { display: inline-block; }

					

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!--
  with relative unit such as percentage, the visual size
  of the square looks unchanged regardless of the viewBox
  -->
  <rect x="0" y="0" width="100%" height="100%"/>
  <!--
  with a large viewBox the circle looks small
  as it is using user units for the r attribute:
  4 resolved against 100 as set in the viewBox
  -->
  <circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  with relative unit such as percentage, the visual size
  of the square looks unchanged regardless of the viewBox
  -->
  <rect x="0" y="0" width="100%" height="100%"/>
  <!--
  with a small viewBox the circle looks large
  as it is using user units for the r attribute:
  4 resolved against 10 as set in the viewBox
  -->
  <circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  The point of coordinate 0,0 is now in the center of the viewport,
  and 100% is still resolve to a width or height of 10 user units so
  the rectangle looks shifted to the bottom/right corner of the viewport
  -->
  <rect x="0" y="0" width="100%" height="100%"/>
  <!--
  With the point of coordinate 0,0 in the center of the viewport the
  value 50% is resolve to 5 which means the center of the circle is
  in the bottom/right corner of the viewport.
  -->
  <circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>

					

The exact effect of this attribute is influenced by the preserveAspectRatio 属性。

注意： Values for width or height lower or equal to 0 disable rendering of the element.

marker

For <marker> , viewBox defines the position and dimension for the content of the <marker> 元素。

值	<number> ?, <number> ?, <number> ?, <number>
默认值	none
Animatable	Yes

pattern

For <pattern> , viewBox defines the position and dimension for the content of the pattern tile.

值	<number> ?, <number> ?, <number> ?, <number>
默认值	none
Animatable	Yes

svg

For <svg> , viewBox defines the position and dimension for the content of the <svg> 元素。

值	<number> ?, <number> ?, <number> ?, <number>
默认值	none
Animatable	Yes

symbol

For <symbol> , viewBox defines the position and dimension for the content of the <symbol> 元素。

值	<number> ?, <number> ?, <number> ?, <number>
默认值	none
Animatable	Yes

view

For <view> , viewBox defines the position and dimension for the content of the <view> 元素。

值	<number> ?, <number> ?, <number> ?, <number>
默认值	none
Animatable	Yes

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'viewBox' in that specification.	候选推荐
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'viewBox' in that specification.	推荐	初始定义

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Dec 1, 2021 , 由 MDN 贡献者