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>

Результат

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # LinearGradientElementSpreadMethodAttribute
Scalable Vector Graphics (SVG) 2 # RadialGradientElementSpreadMethodAttribute

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`spreadMethod`	1	79	1.5	15	3	18	4	14	2	1.0	4.4

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