宽度

您可以将此属性与以下部分中描述的 SVG 元素一起使用。

对于 <feBlend>，width 定义基元的渲染区域的水平长度。

对于 <feColorMatrix>，width 定义基元的渲染区域的水平长度。

对于 <feComponentTransfer>，width 定义基元的渲染区域的水平长度。

对于 <feComposite>，width 定义基元的渲染区域的水平长度。

对于 <feConvolveMatrix>，width 定义基元的渲染区域的水平长度。

对于 <feDiffuseLighting>，width 定义基元的渲染区域的水平长度。

对于 <feDisplacementMap>，width 定义基元的渲染区域的水平长度。

对于 <feDropShadow>，width 定义基元的渲染区域的水平长度。

对于 <feFlood>，width 定义基元的渲染区域的水平长度。

对于 <feGaussianBlur>，width 定义基元的渲染区域的水平长度。

对于 <feImage>，width 定义基元的渲染区域的水平长度。

对于 <feMerge>，width 定义基元的渲染区域的水平长度。

对于 <feMorphology>，width 定义基元的渲染区域的水平长度。

对于 <feOffset>，width 定义基元的渲染区域的水平长度。

对于 <feSpecularLighting>，width 定义基元的渲染区域的水平长度。

对于 <feTile>，width 定义基元的渲染区域的水平长度。

对于 <feTurbulence>，width 定义基元的渲染区域的水平长度。

对于 <filter>，width 定义过滤器的渲染区域的水平长度。

对于 <foreignObject>，width 定义引用的文档的渲染区域的水平长度。

对于 <image>，width 定义图像的水平长度。

对于 <mask>，width 定义其影响区域的水平长度。此属性的确切效果会受到 maskUnits 属性的影响。

对于 <pattern>，width 定义平铺图案的水平长度。此属性的确切效果会受到 patternUnits 和 patternTransform 属性的影响。

对于 <rect>，width 定义矩形的水平长度。

对于 <svg>，width 定义 SVG 视窗的渲染区域的水平长度。

对于 <use>，width 定义了引用元素的水平长度。

html,
body,
svg {
  height: 100%;
}

此示例包含三个 <rect> 元素，它们具有不同的 width 属性值。第一个 <rect> 设置了 width="0"。宽度为 0 或更小的 SVG 元素不会呈现。

<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"
    fill="red"
    stroke-width="5"
    stroke="black" />
  <rect
    x="0"
    y="100"
    width="60"
    height="90"
    fill="red"
    stroke-width="5"
    stroke="black" />
  <rect
    x="0"
    y="200"
    width="100%"
    height="90"
    fill="red"
    stroke-width="5"
    stroke="black" />
</svg>