gradientTransform

Атрибут gradientTransform содержит определение необязательного дополнительного преобразования из системы координат градиента в целевую систему координат (то есть userSpaceOnUse или objectBoundingBox). Это позволяет выполнять такие операции, как наклон градиента. Эта дополнительная матрица преобразования применяется умножением справа (то есть добавляется справа) к любым ранее определённым преобразованиям, включая неявное преобразование, необходимое для перехода от единиц ограничивающего прямоугольника объекта к пользовательскому пространству.

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

• <linearGradient>
• <radialGradient>

Пример

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient
    id="gradient1"
    gradientUnits="userSpaceOnUse"
    cx="100"
    cy="100"
    r="100"
    fx="100"
    fy="100">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>
  <radialGradient
    id="gradient2"
    gradientUnits="userSpaceOnUse"
    cx="100"
    cy="100"
    r="100"
    fx="100"
    fy="100"
    gradientTransform="skewX(20) translate(-35, 0)">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>

  <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
  <rect x="220" y="0" width="200" height="200" fill="url(#gradient2)" />
</svg>

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

<transform-list>

Список функций преобразования, задающих дополнительное преобразование из системы координат градиента в целевую систему координат.

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

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

svg.elements.linearGradient.gradientTransform

svg.elements.radialGradient.gradientTransform

См. также

• <transform-function>