width

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>

width attribute defines the horizontal length of an element in the user coordinate system.

You can use this attribute with the following SVG elements:

• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feDropShadow>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>
• <feTurbulence>
• <filter>
• <foreignObject>
• <image>
• <mask>
• <pattern>
• <rect>
• <svg>
• <use>

范例

html,body,svg { height:100% }

								

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <!-- With a width of 0 or less, nothing will be rendered -->
  <rect x="0" y="0" width="0" height="90"/>
  <rect x="0" y="100" width="60" height="90"/>
  <rect x="0" y="200" width="100%" height="90"/>
</svg>

								

feBlend

For <feBlend> , width defines the horizontal length for the rendering area of the primitive.

feColorMatrix

For <feColorMatrix> , width defines the horizontal length for the rendering area of the primitive.

feComponentTransfer

For <feComponentTransfer> , width defines the horizontal length for the rendering area of the primitive.

feComposite

For <feComposite> , width defines the horizontal length for the rendering area of the primitive.

feConvolveMatrix

For <feConvolveMatrix> , width defines the horizontal length for the rendering area of the primitive.

feDiffuseLighting

For <feDiffuseLighting> , width defines the horizontal length for the rendering area of the primitive.

feDisplacementMap

For <feDisplacementMap> , width defines the horizontal length for the rendering area of the primitive.

feDropShadow

For <feDropShadow> , width defines the horizontal length for the rendering area of the primitive.

feFlood

For <feFlood> , width defines the horizontal length for the rendering area of the primitive.

feGaussianBlur

For <feGaussianBlur> , width defines the horizontal length for the rendering area of the primitive.

feImage

For <feImage> , width defines the horizontal length for the rendering area of the primitive.

feMerge

For <feMerge> , width defines the horizontal length for the rendering area of the primitive.

feMorphology

For <feMorphology> , width defines the horizontal length for the rendering area of the primitive.

feOffset

For <feOffset> , width defines the horizontal length for the rendering area of the primitive.

feSpecularLighting

For <feSpecularLighting> , width defines the horizontal length for the rendering area of the primitive.

feTile

For <feTile> , width defines the horizontal length for the rendering area of the primitive.

feTurbulence

For <feTurbulence> , width defines the horizontal length for the rendering area of the primitive.

filter

For <filter> , width defines the horizontal length for the rendering area of the filter.

foreignObject

For <foreignObject> , width defines the horizontal length for the rendering area for the referenced document.

注意： Starting with SVG2, width 是 Geometry Property meaning this attribute can also be used as a CSS property for <foreignObject> .

image

For <image> , width defines the horizontal length for the image.

注意： Starting with SVG2, width 是 Geometry Property meaning this attribute can also be used as a CSS property for images.

mask

For <mask> , width defines the horizontal length of its area of effect. The exact effect of this attribute is influenced by the maskUnits 属性。

pattern

For <pattern> , width defines the horizontal length of the tile pattern. The exact effect of this attribute is influenced by the patternUnits and patternTransform 属性。

rect

For <rect> , width defines the horizontal length for the rectangle.

注意： Starting with SVG2, width 是 Geometry Property meaning this attribute can also be used as a CSS property for rectangles.

svg

For <svg> , width defines the horizontal length for the rendering area of the SVG viewport.

注意： In an HTML document if both the viewBox and width attributes are omitted, the svg element will be rendered with a width of 300px

注意： Starting with SVG2, width 是 Geometry Property meaning this attribute can also be used as a CSS property for <svg> .

使用

For <use> , width defines the horizontal length for the referenced element.

注意：   width 不起作用对 使用 elements, unless the element referenced has a viewbox - i.e. they only have an effect when 使用 refers to a svg or symbol 元素。

注意： Starting with SVG2, width 是 Geometry Property meaning this attribute can also be used as a CSS property for used elements.

规范

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 .

最后修改： Sep 23, 2021 , 由 MDN 贡献者