spreadMethod

spreadMethod 属性确定在梯度定义的边缘之外如何填充形状。

您可以将此属性与以下 SVG 元素一起使用

上下文说明

值 pad | reflect | repeat
初始值 pad
可动画 是
pad

此值表示梯度的最终颜色将填充超出梯度边缘的形状。

reflect

此值表示梯度在边缘之外反向重复。

repeat

此值指定梯度在边缘之外以原始顺序重复。

定义梯度的边缘

默认情况下，梯度会延伸到要填充的形状的边缘。要查看此属性的效果，您需要将梯度的尺寸设置得比形状小。

对于线性梯度，边缘可以通过 x1、x2、y1 和 y2 属性定义为矩形。对于径向梯度，边缘可以通过 cx、cy 和 r（外）和 fx、fy 和 fr（内）属性定义为外圆和内圆。

spreadMethod 与线性渐变的示例

SVG

html
<svg width="220" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="PadGradient" x1="33%" x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
    <linearGradient
      id="ReflectGradient"
      spreadMethod="reflect"
      x1="33%"
      x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
    <linearGradient id="RepeatGradient" spreadMethod="repeat" x1="33%" x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
  </defs>

  <rect fill="url(#PadGradient)" x="10" y="0" width="200" height="40" />
  <rect fill="url(#ReflectGradient)" x="10" y="50" width="200" height="40" />
  <rect fill="url(#RepeatGradient)" x="10" y="100" width="200" height="40" />
</svg>

结果

请注意，每个梯度的中间三分之一是相同的。外三分之一显示了三种扩展方法之间的差异。

spreadMethod 与径向渐变的示例

SVG

html
<svg width="340" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
      id="RadialPadGradient"
      cx="75%"
      cy="25%"
      r="33%"
      fx="64%"
      fy="18%"
      fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
    <radialGradient
      id="RadialReflectGradient"
      spreadMethod="reflect"
      cx="75%"
      cy="25%"
      r="33%"
      fx="64%"
      fy="18%"
      fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
    <radialGradient
      id="RadialRepeatGradient"
      spreadMethod="repeat"
      cx="75%"
      cy="25%"
      r="33%"
      fx="64%"
      fy="18%"
      fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
  </defs>

  <rect fill="url(#RadialPadGradient)" x="10" y="10" width="100" height="100" />
  <rect
    fill="url(#RadialReflectGradient)"
    x="120"
    y="10"
    width="100"
    height="100" />
  <rect
    fill="url(#RadialRepeatGradient)"
    x="230"
    y="10"
    width="100"
    height="100" />
</svg>

结果

规范

规范
可缩放矢量图形 (SVG) 2
# LinearGradientElementSpreadMethodAttribute
可缩放矢量图形 (SVG) 2
# RadialGradientElementSpreadMethodAttribute

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。