spreadMethod

Атрибут spreadMethod определяет, как фигура заполняется за пределами заданных границ градиента.

Этот атрибут можно использовать со следующими SVG-элементами:

Примечания по использованию

Значение	`pad` \| `reflect` \| `repeat`
Начальное значение	`pad`
Анимируемый	Да

pad: Это значение указывает, что последний цвет градиента заполняет фигуру за пределами границ градиента.
reflect: Это значение указывает, что градиент повторяется в обратном направлении за своими границами.
repeat: Это значение указывает, что градиент повторяется в исходном порядке за своими границами.

Определение границ градиента

По умолчанию градиент доходит до границ заполняемой фигуры. Чтобы увидеть эффект этого атрибута, необходимо задать размер градиента меньше размера фигуры.

В случае линейного градиента границы могут быть заданы как прямоугольник с помощью атрибутов x1, x2, y1 и y2. В случае радиального градиента границы могут быть заданы как внешняя и внутренняя окружности с помощью атрибутов cx, cy и r (внешняя), а также fx, fy и fr (внутренняя).

Примеры использования spreadMethod с линейными градиентами

SVG

<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

<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>

Совместимость с браузерами

svg.elements.linearGradient.spreadMethod

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`spreadMethod`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	2

svg.elements.radialGradient.spreadMethod

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`spreadMethod`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	2

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod