--- title: slug: Web/SVG/Element/linearGradient tags: - SVG - SVG градиент - Элемент translation_of: Web/SVG/Element/linearGradient original_slug: Web/SVG/Элемент/linearGradient ---
{{SVGRef}}

<linearGradient> позволяет определять линейные градиенты для заполнения или изменения графических элементов.

Не путайте с CSS {{cssxref('linear-gradient()')}}, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

{{EmbedLiveSample('Example', 150, '100%')}}

Атрибуты

{{SVGAttr("gradientUnits")}}
Определяет систему координат для атрибутов x1, x2, y1, y2
Тип значения: userSpaceOnUse|objectBoundingBox ; Значение по умолчанию: objectBoundingBox; Анимируемый: да
{{SVGAttr("gradientTransform")}}
Этот атрибут обеспечивает дополнительное преобразование для системы координат градиента.
Тип значения: <transform-list> ; Значение по умолчанию: identity transform; Анимируемый: да
{{SVGAttr("href")}}
Этот атрибут определяет ссылку на другой элемент <linearGradient>, который будет использоваться в качестве шаблона.
Тип значения: <URL> ; Значение по умолчанию: none; Анимируемый: да
{{SVGAttr("spreadMethod")}}
Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент.
Тип значения: pad|reflect|repeat ; Значение по умолчанию: pad; Анимируемый: да
{{SVGAttr("x1")}}
Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
{{SVGAttr("x2")}}
Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
Тип значения: <length> ; Значение по умолчанию: 100%; Анимируемый: да
{{SVGAttr("xlink:href")}}
{{Deprecated_Header}}<IRI> ссылка на другой <linearGradient> элемент, который будет использоваться в качестве шаблона.
Тип значения: <IRI> ; Значение по умолчанию: none; Анимируемый: да
{{SVGAttr("y1")}}
Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
{{SVGAttr("y2")}}
Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да

Глобальные атрибуты

Основные атрибуты
Прежде всего: {{SVGAttr('id')}}
Атрибуты стилизации
{{SVGAttr('class')}}, {{SVGAttr('style')}}
Атрибуты событий
Глобальные атрибуты событий, Атрибуты событий элементов документа
Атрибуты презентации
Прежде всего: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
XLink атрибуты
{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}

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

{{svginfo}}

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

{{Specifications}}

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

{{Compat}}