Градиенты в SVG

Линейные градиенты изменяются вдоль прямой линии. Чтобы вставить такой градиент, создайте узел <linearGradient> внутри раздела <defs> вашего файла SVG.

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1">
      <stop class="stop1" offset="0%" />
      <stop class="stop2" offset="50%" />
      <stop class="stop3" offset="100%" />
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="black" stop-opacity="0" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <style>
    #rect1 {
      fill: url(#Gradient1);
    }
    .stop1 {
      stop-color: red;
    }
    .stop2 {
      stop-color: black;
      stop-opacity: 0;
    }
    .stop3 {
      stop-color: blue;
    }
  </style>

  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100" />
  <rect
    x="10"
    y="120"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#Gradient2)" />
</svg>

Выше приведён пример применения линейного градиента к элементу <rect>. Внутри линейного градиента находятся несколько узлов <stop>. Эти узлы указывают градиенту цвет в определённых позициях, задавая атрибут offset для позиции и атрибут stop-color. Это может быть задано непосредственно или через CSS. В этом примере оба метода используются совместно. Например, этот пример задаёт градиент, начинающийся с красного цвета, изменяющийся на прозрачно-чёрный посередине и заканчивающийся синим цветом. Вы можете вставлять столько цветов-стопов, сколько нужно, чтобы создать плавную или резкую смесь, но значения смещений всегда должны увеличиваться от 0% (или 0, если вы хотите убрать знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, расположенный ниже в дереве XML. Также, как и с заливкой и обводкой, вы можете указать атрибут stop-opacity для задания прозрачности в данной позиции (в FF3 также можно использовать значения rgba).

<stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>

Чтобы использовать градиент, необходимо сослаться на него из атрибута fill или stroke объекта. Это делается так же, как вы ссылаетесь на элементы в CSS, используя url. В данном случае url — это просто ссылка на наш градиент, который имеет творческий идентификатор «Gradient1». Для его подключения установите fill в url(#Gradient1), и готово! Теперь наш объект имеет несколько цветов. Вы можете сделать то же самое с stroke.

<style>
  #rect1 { fill: url(#Gradient1); }
</style>

Элемент <linearGradient> также принимает несколько других атрибутов, которые задают размер и вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами x1, x2, y1, и y2. Эти атрибуты определяют линию, по которой проходит градиент. По умолчанию градиент имеет горизонтальное направление, но его можно повернуть, изменив эти значения. Gradient2 в примере выше предназначен для создания вертикального градиента.

<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"></linearGradient>

<linearGradient id="Gradient1">
  <stop id="stop1" offset="0%" />
  <stop id="stop2" offset="50%" />
  <stop id="stop3" offset="100%" />
</linearGradient>
<linearGradient
  id="Gradient2"
  x1="0"
  x2="0"
  y1="0"
  y2="1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  href="#Gradient1" />

Радиальные градиенты похожи на линейные, но рисуют градиент, расходящийся от точки. Чтобы создать такой градиент, добавьте элемент <radialGradient> в раздел <defs> вашего документа.

<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="RadialGradient1">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
    x="10"
    y="10"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#RadialGradient1)" />
  <rect
    x="10"
    y="120"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#RadialGradient2)" />
</svg>

Используемые здесь стопы такие же, как и раньше, но теперь объект будет красным в центре и во всех направлениях постепенно изменяться на синий по краям. Как и линейные градиенты, узел <radialGradient> может принимать несколько атрибутов для описания его положения и ориентации. Однако, в отличие от линейных градиентов, это немного сложнее. Радиальный градиент снова определяется двумя точками, которые определяют, где находятся его края. Первая из них определяет окружность, по которой заканчивается градиент. Она требует центральной точки, заданной атрибутами cx и cy, и радиусом, r. Установка этих трёх атрибутов позволит вам перемещать градиент и изменять его размер, как показано во втором примере rect выше.

Вторая точка называется фокусной точкой и определяется атрибутами fx и fy. Если первая точка определяла, где находятся края градиента, то фокусная точка определяет, где находится его середина. Это легче понять на примере.

<?xml version="1.0" standalone="no"?>

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
    x="10"
    y="10"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#Gradient)"
    stroke="black"
    stroke-width="2" />

  <circle
    cx="60"
    cy="60"
    r="50"
    fill="transparent"
    stroke="white"
    stroke-width="2" />
  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>

Если фокусная точка перемещается за пределы окружности, описанной ранее, то невозможно корректно отрисовать градиент, поэтому место будет считаться внутри края окружности. Если фокусная точка вообще не задана, она предполагается в том же месте, что и центральная точка.

Как линейные, так и радиальные градиенты также принимают несколько других атрибутов для описания возможных преобразований. Единственный другой атрибут, который я хочу здесь упомянуть, — это spreadMethod . Этот атрибут определяет, что произойдёт, когда градиент достигнет своего конца, но объект ещё не заполнен. Он может принимать одно из трёх значений, "pad", "reflect", или "repeat". "pad" — то, что вы видели до сих пор. Когда градиент достигает своего конца, используется конечный цвет смещения для заполнения остальной части объекта. "reflect" заставляет градиент продолжать двигаться, но отражается в обратном порядке, начиная с цвета смещения 100% и возвращаясь к смещению 0%, а затем снова вверх. "repeat" также позволяет градиенту продолжать двигаться, но вместо обратного движения он просто возвращается к началу и начинает заново.

<?xml version="1.0" standalone="no"?>

<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
      id="GradientPad"
      cx="0.5"
      cy="0.5"
      r="0.4"
      fx="0.75"
      fy="0.75"
      spreadMethod="pad">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient
      id="GradientRepeat"
      cx="0.5"
      cy="0.5"
      r="0.4"
      fx="0.75"
      fy="0.75"
      spreadMethod="repeat">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient
      id="GradientReflect"
      cx="0.5"
      cy="0.5"
      r="0.4"
      fx="0.75"
      fy="0.75"
      spreadMethod="reflect">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
    x="10"
    y="10"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#GradientPad)" />
  <rect
    x="10"
    y="120"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#GradientRepeat)" />
  <rect
    x="120"
    y="120"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#GradientReflect)" />

  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">
    Pad
  </text>
  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">
    Repeat
  </text>
  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">
    Reflect
  </text>
</svg>

Оба градиента также имеют атрибут gradientUnits, который описывает систему единиц, которую вы будете использовать при описании размера или ориентации градиента. Здесь можно использовать два возможных значения: "userSpaceOnUse" или "objectBoundingBox". "objectBoundingBox" является значением по умолчанию, поэтому именно оно было показано до этого. В сущности, это масштабирует градиент до размера вашего объекта, поэтому вам нужно указывать координаты только в значениях от нуля до единицы, а они автоматически масштабируются до размера вашего объекта. userSpaceOnUse вводит абсолютные единицы. Так что вам нужно знать, где находится ваш объект, и расположить градиент в том же месте. Радиальный градиент выше был бы переписан:

<radialGradient
  id="Gradient"
  cx="60"
  cy="60"
  r="50"
  fx="35"
  fy="35"
  gradientUnits="userSpaceOnUse"></radialGradient>

Вы также можете применить другое преобразование к градиенту, используя атрибут gradientTransform, но поскольку мы ещё не представляли преобразования, я оставлю это на потом.

Есть ещё некоторые нюансы при работе с gradientUnits="objectBoundingBox" , когда прямоугольник ограничительной рамки объекта не является квадратным, но они довольно сложные и должны быть объяснены более компетентными лицами.