Enter
    Расширенный поиск
    Клавиша / esc

    HTML

    Атрибут d

    SVG-атрибут описания пути для элемента <path>.

    Время чтения: 12 мин

    Кратко

    Скопировано

    Атрибут d описывает путь, который будет отрисован элементом <path>.

    Значение атрибута — строка со списком команд, написанных особым образом.

    Пример

    Скопировано
            
          
          <svg width="300" height="300">  <path    d="      M 190 240      Q 90  240        90  190      T 190 140      L 190 40      Z"    stroke="white"    stroke-width="4"    fill="none"  /></svg>
          <svg width="300" height="300">
  <path
    d="
      M 190 240
      Q 90  240
        90  190
      T 190 140
      L 190 40
      Z"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
</svg>
    Открыть демо в новой вкладке

    Как пишется

    Скопировано

    Команды атрибута d состоят из одной буквы и нескольких чисел. Доступные команды:

    • перемещение кисти — M, m;
    • прямая линия — L, l, H, h, V, v;
    • кубическая кривая Безье — C, c, S, s;
    • квадратичная кривая Безье — Q, q, T, t;
    • эллиптическая кривая — A, a;
    • закрытие пути — Z, z.

    Каждая буква не случайно написана в верхнем и нижнем регистрах. Регистр команды влияет на обработку координат, стоящих после буквы. Заглавные буквы означают работу с абсолютными координатами, а строчные — с относительными.

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

    Команды перемещения кисти

    Скопировано

    Рисование фигур с помощью <path> начинается с выбора точки на плоскости. Это начальная позиция воображаемой кисти, которая будет перемещаться по холсту с помощью команд.

    Команда Параметры Описание
    M (x y)+ Перемещение кисти в точку x, y.
    m (dx dy)+ Перемещение кисти на dx, dy относительно текущей позиции.

    Если передать в команду несколько точек, то, начиная со второй точки, будут выполнены не перемещения кисти, а рисование прямых линий как при использовании команды прямой линии L или l.

            
          
          <svg width="300" height="300">  <path    d="      M 50 125      L 150 225      M 150 50        250 150"    stroke="white"    stroke-width="4"    fill="none"  /></svg>
          <svg width="300" height="300">
  <path
    d="
      M 50 125
      L 150 225
      M 150 50
        250 150"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
</svg>
    Открыть демо в новой вкладке

    Команды прямых линий

    Скопировано
    Команда Параметры Описание
    L (x y)+ Прямая линия до точки x, y.
    l (dx dy)+ Прямая линия до точки, находящейся на dx, dy от текущей позиции.
    H (x)+ Горизонтальная линия до координаты x.
    h (dx)+ Горизонтальная линия длиной dx.
    V (y)+ Вертикальная линия до координаты y.
    v (dy)+ Вертикальная линия длиной dy. 
            
          
          <svg width="300" height="300">  <path    d="      M 50 50      V 150      H 150      L 250 250"    stroke="white"    stroke-width="4"    fill="none"  /></svg>
          <svg width="300" height="300">
  <path
    d="
      M 50 50
      V 150
      H 150
      L 250 250"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
</svg>
    Открыть демо в новой вкладке

    Команды кубических кривых Безье

    Скопировано

    Кривые Безье позволяют рисовать плавные линии. Для описания кривой требуется всего несколько координат точек. Первая и последняя точки будут началом и концом кривой, а промежуточные будут влиять на её изгиб. «Кривые Безье».

    Кривые Безье бывают разных порядков, всё зависит от количества промежуточных точек. Кубическая кривая Безье имеет 2 промежуточные точки.

    Команда Параметры Описание
    C (x1 y1 x2 y2 x y)+ Кубическая кривая Безье от текущей позиции до x, y, где x1, y1 и x2, y2 — опорные точки.
    c (dx1 dy1 dx2 dy2 dx dy)+ Кубическая кривая Безье от текущей позиции до точки с координатами текущий x + dx, текущий y + dy, где опорными являются точки, полученные смещением текущей позиции на dx1, dy1 и dx2, dy2 соответственно.
    S (x2 y2 x y)+ Кубическая кривая Безье от текущей позиции до x, y, где x2, y2 — координаты конечной опорной точки.
    s (dx2 dy2 dx dy)+ Кубическая кривая Безье от текущей позиции до точки с координатами текущий x + dx, текущий y + dy, где конечная опорная точка будет иметь координаты текущий x + dx2, текущий y + dy2.

    S / s рисует более плавную кривую, потому что берёт координаты второй из четырех опорных точек x1, y1 на основании предыдущей команды. Если предыдущая команда была кривой Безье, то вторая опорная точка станет отражением предпоследней точки предыдущей кривой. Иначе координаты опорной точки будут совпадать с текущей позицией.

    Оранжевыми точками (fill="#FF8630") отмечены опорные, начальные и конечные точки кривых. Синим цветом (fill="#2E9AFF") отмечена промежуточная опорная точка второй кривой, которую получили отражением промежуточной опорной точки первой кривой.

            
          
          <svg width="300" height="300">  <path    d="      M 50 50      C 150 50        50 150        150 150      S 150 250        250 250"    stroke="white"    stroke-width="4"    fill="none"  />  <circle r="5" cx="50" cy="50" fill="#FF8630" />  <circle r="5" cx="150" cy="50" fill="#FF8630" />  <circle r="5" cx="50" cy="150" fill="#FF8630" />  <circle r="5" cx="150" cy="150" fill="#FF8630" />  <circle r="5" cx="150" cy="250" fill="#FF8630" />  <circle r="5" cx="250" cy="250" fill="#FF8630" />  <circle r="5" cx="250" cy="150" fill="#2E9AFF" /></svg>
          <svg width="300" height="300">
  <path
    d="
      M 50 50
      C 150 50
        50 150
        150 150
      S 150 250
        250 250"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
  <circle r="5" cx="50" cy="50" fill="#FF8630" />
  <circle r="5" cx="150" cy="50" fill="#FF8630" />
  <circle r="5" cx="50" cy="150" fill="#FF8630" />
  <circle r="5" cx="150" cy="150" fill="#FF8630" />
  <circle r="5" cx="150" cy="250" fill="#FF8630" />
  <circle r="5" cx="250" cy="250" fill="#FF8630" />
  <circle r="5" cx="250" cy="150" fill="#2E9AFF" />
</svg>
    Открыть демо в новой вкладке

    Команды квадратичных кривых Безье

    Скопировано

    Квадратичная кривая Безье имеет 1 промежуточную точку.

    Команда Параметры Описание
    Q (x1 y1 x y)+ Квадратичная кривая Безье от текущей позиции до x, y, где x1, y1 — опорная точка.
    q (dx1 dy1 dx dy)+ Квадратичная кривая Безье от текущей позиции до точки с координатами текущий x + dx, текущий y + dy, где опорной является точка, полученная смещением текущей позиции на dx1, dy1.
    T (x y)+ Квадратичная кривая Безье от текущей позиции до x, y.
    t (dx dy)+ Квадратичная кривая Безье от текущей позиции до текущий x + dx, текущий y + dy.

    T / t рисует более плавную квадратичную кривую Безье, потому что берёт координаты опорной точки x1, y1 на основании предыдущей команды. Если предыдущая команда была кривой Безье, то промежуточная опорная точка станет отражением предпоследней точки предыдущей кривой. Иначе координаты опорной точки будут совпадать с текущей позицией.

    Красные точки (fill="red") — опорные, начальные и конечные точки кривых. Синим цветом (fill="#2E9AFF") отмечена промежуточная опорная точка второй кривой, которую получили отражением промежуточной опорной точки первой кривой.

            
          
          <svg width="300" height="300">  <path    d="      M 50 50      Q 150 50        150 150      T 250 250"    stroke="white"    stroke-width="4"    fill="none"  />  <circle r="5" cx="50" cy="50" fill="#FF8630" />  <circle r="5" cx="150" cy="50" fill="#FF8630" />  <circle r="5" cx="150" cy="150" fill="#FF8630" />  <circle r="5" cx="250" cy="250" fill="#FF8630" />  <circle r="5" cx="150" cy="250" fill="#2E9AFF" /></svg>
          <svg width="300" height="300">
  <path
    d="
      M 50 50
      Q 150 50
        150 150
      T 250 250"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
  <circle r="5" cx="50" cy="50" fill="#FF8630" />
  <circle r="5" cx="150" cy="50" fill="#FF8630" />
  <circle r="5" cx="150" cy="150" fill="#FF8630" />
  <circle r="5" cx="250" cy="250" fill="#FF8630" />
  <circle r="5" cx="150" cy="250" fill="#2E9AFF" />
</svg>
    Открыть демо в новой вкладке

    Команды эллиптических кривых

    Скопировано

    Эллиптическими кривыми называют такие линии, которые соответствуют некоторой части эллипса.

    Команда Параметры Описание
    A (rx ry angle large-arc-flag sweep-flag x y)+ Эллиптическая кривая с горизонтальным радиусом rx и вертикальным радиусом ry, которая начинается в текущей точке и завершается в точке с координатами x, y. angle отвечает за поворот кривой относительно горизонтальной оси плоскости.
    a (rx ry angle large-arc-flag sweep-flag dx dy)+ Эллиптическая кривая с горизонтальным радиусом rx и вертикальным радиусом ry, которая начинается в текущей точке и завершается в точке с координатами текущий x + dx, текущий y + dy. angle отвечает за поворот кривой относительно горизонтальной оси плоскости.

    Флаг large-arc-flag отвечает за выбор большей дуги при значении 1 и меньшей при значении 0. Флаг sweep-flag отвечает за выбор направления дуги: 1 — по часовой стрелке, 0 — против часовой стрелки.

    Лучше понять как флаги влияют на отображение кривой помогут эти демки. Оранжевыми точками (fill="#FF8630") отмечены начальная и конечная позиция кисти при рисовании кривой. Белым цветом отмечена дуга (stroke="white"), которая нарисована с указанными значениями флагов. Серым отмечены остальные комбинации флагов.

            
          
          <svg width="300" height="300">  <path    d="M 125 175 A 50 50 0 large-arc-flag sweep-flag 175 125"    stroke="white"    stroke-width="4"    fill="none"  />  <!--    Замените large-arc-flag и sweep-flag    значениями из примеров  -->  <circle r="5" cx="125" cy="175" fill="#FF8630" />  <circle r="5" cx="175" cy="125" fill="#FF8630" /></svg>
          <svg width="300" height="300">
  <path
    d="M 125 175 A 50 50 0 large-arc-flag sweep-flag 175 125"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
  <!--
    Замените large-arc-flag и sweep-flag
    значениями из примеров
  -->
  <circle r="5" cx="125" cy="175" fill="#FF8630" />
  <circle r="5" cx="175" cy="125" fill="#FF8630" />
</svg>

    Короткая дуга против часовой стрелки (large-arc-flag = 0, sweep-flag = 0):

    Открыть демо в новой вкладке

    Короткая дуга по часовой стрелке (large-arc-flag = 0, sweep-flag = 1):

    Открыть демо в новой вкладке

    Длинная дуга против часовой стрелки (large-arc-flag = 1, sweep-flag = 0):

    Открыть демо в новой вкладке

    Длинная дуга по часовой стрелке (large-arc-flag = 1, sweep-flag = 1):

    Открыть демо в новой вкладке

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

            
          
          <svg width="300" height="300">  <path    d="      M 50 150      A 100 100 0 0 1 150 50        100 100 0 1 1 50 150"    stroke="white"    stroke-width="4"    fill="none"  /></svg>
          <svg width="300" height="300">
  <path
    d="
      M 50 150
      A 100 100 0 0 1 150 50
        100 100 0 1 1 50 150"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
</svg>
    Открыть демо в новой вкладке

    Команды закрытия пути

    Скопировано

    Команда Z, z проводит прямую линию до начальной точки текущей части пути.

    В примере из начала статьи используется команда закрытия пути. Она проводит прямую линию до начальной точки:

            
          
          <svg width="300" height="300">  <path    d="      M 190 240      Q 90  240        90  190      T 190 140      L 190 40      Z"    stroke="white"    stroke-width="4"    fill="none"  /></svg>
          <svg width="300" height="300">
  <path
    d="
      M 190 240
      Q 90  240
        90  190
      T 190 140
      L 190 40
      Z"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
</svg>
    Открыть демо в новой вкладке

    В описании команды закрытия пути указано, что она проводит линию до начальной точки текущей части пути. Это означает, что путь может состоять из нескольких частей, начинаясь командой перемещения кисти M/m и заканчиваясь командой закрытия пути Z/z.

            
          
          <svg width="300" height="300">  <path    d="      M 50 50      V 125      H 125      Z      M 250 250      V 175      H 175      Z"    stroke="white"    stroke-width="4"    fill="none"  /></svg>
          <svg width="300" height="300">
  <path
    d="
      M 50 50
      V 125
      H 125
      Z
      M 250 250
      V 175
      H 175
      Z"
    stroke="white"
    stroke-width="4"
    fill="none"
  />
</svg>
    Открыть демо в новой вкладке

    Нюансы синтаксиса описания пути

    Скопировано

    Числа в описании пути могут быть разделены пробельными символами или запятыми, причем нет ограничений в каких ситуациях запятую можно, а в каких нет. Результат будет одинаковый:

    • M 50 50 L 150 50 150 150 — вообще не используем запятые.
    • M 50 50 L 150 50, 150 150 — разделяем запятыми пары координаты.
    • M 50 50 L 150, 50 150, 150 — разделяем запятыми числа внутри пары координаты.
    • M 50 50 L 150, 50, 150, 150 — ставим запятые между и внутри пар.
    • M50,50L150,50,150,150 — вообще не используем пробелы.

    Подробнее о грамматике описания пути в официальной спецификации SVG.

    Использование в CSS

    Скопировано

    В CSS значение атрибута d можно задать с помощью функции path().

            
          
          .path {  d: path("M 190 240 Q 90  240 90  190 T 190 140 L 190 40 Z");}
          .path {
  d: path("M 190 240 Q 90  240 90  190 T 190 140 L 190 40 Z");
}

    Читайте также

    • <svg>

      Тег-обёртка для отображения векторной графики на странице.

    • var()

      Функция для использования кастомных свойств в CSS.

    • Поток документа

      Объяснение одной из основных концепций вёрстки и её составляющих: контекста форматирования, схлопывания отступов и выхода из потока.