Spec-Zone.ru › SVG

d

Базовая поддержка Широко доступно *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна в браузерах с ⁨июля 2015 года⁩.

* Поддержка некоторых частей этой функции может различаться.

  • Подробнее
  • Полная таблица совместимости
  • Оставить отзыв

Атрибут d задаёт путь для рисования.

Определение пути представляет собой список команд path, каждая из которых состоит из буквы команды и чисел, задающих её параметры. Подробное описание команд приведено ниже.

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

d — это атрибут представления, поэтому его также можно использовать как свойство CSS.

Пример

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

path

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

Значение <string>
Значение по умолчанию none
Анимируемый Да

Использование d как свойства CSS

d — это атрибут представления, поэтому его также можно изменять с помощью CSS. Свойство принимает либо path(), либо none.

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

html,
body,
svg {
  height: 100%;
}

/* This path is displayed on hover */
#svg_css_ex1:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
}

<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z
       " />
</svg>

Пример <path> анимации см. на странице справки о свойстве CSS d.

Команды path

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

В SVG определено 6 типов команд path, всего — 20 команд:

  • MoveTo: M, m
  • LineTo: L, l, H, h, V, v
  • Кубическая кривая Безье: C, c, S, s
  • Квадратичная кривая Безье: Q, q, T, t
  • Дуга эллипса: A, a
  • ClosePath: Z, z

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

В качестве аргумента команды всегда можно указать отрицательное значение:

  • отрицательные углы задают вращение против часовой стрелки;
  • отрицательные абсолютные значения x и y интерпретируются как отрицательные координаты;
  • отрицательные относительные значения x перемещают точку влево, а отрицательные относительные значения y — вверх.

Команды path MoveTo

Инструкции MoveTo можно представить так: инструмент для рисования поднимают и переносят в другое место — иными словами, перемещают текущую точку (Po; {xo, yo}). Между Po и новой текущей точкой (Pn; {xn, yn}) линия не рисуется.

Команда Параметры Примечания
M (x, y)+

Перемещает текущую точку в координаты x,y. Любые последующие пары координат интерпретируются как параметры неявных команд абсолютного LineTo (L) (см. ниже).

Формула: Pn = {x, y}

m (dx, dy)+

Перемещает текущую точку, смещая последнее известное положение пути на dx вдоль оси x и на dy вдоль оси y. Любые последующие пары координат интерпретируются как параметры неявных команд относительного LineTo (l) (см. ниже).

Формула: Pn = {xo + dx, yo + dy}

Примеры

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 40,20 h 10
       m  0,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 50,50 h 10
       m-20,10 h 10
       m-20,10 h 10
       m-20,10 h 10" />
</svg>

Команды path LineTo

Инструкции LineTo рисуют прямую линию от текущей точки (Po; {xo, yo}) до конечной точки (Pn; {xn, yn}) на основе указанных параметров. Затем конечная точка (Pn) становится текущей точкой для следующей команды (Po′).

Команда Параметры Примечания
L (x, y)+

Рисует линию от текущей точки до конечной точки, заданной координатами x,y. Любые последующие пары координат интерпретируются как параметры неявных команд абсолютного LineTo (L).

Формула: Po′ = Pn = {x, y}

l (dx, dy)+

Рисует линию от текущей точки до конечной точки, которая является текущей точкой, смещённой на dx вдоль оси x и на dy вдоль оси y. Любые последующие пары координат интерпретируются как параметры неявных команд относительного LineTo (l) (см. ниже).

Формула: Po′ = Pn = {xo + dx, yo + dy}

H x+

Рисует горизонтальную линию от текущей точки до конечной точки, заданной параметром x и координатой y текущей точки. Любые последующие значения интерпретируются как параметры неявных команд абсолютного горизонтального LineTo (H).

Формула: Po′ = Pn = {x, yo}

h dx+

Рисует горизонтальную линию от текущей точки до конечной точки, заданной текущей точкой, смещённой на dx вдоль оси x, и координатой y текущей точки. Любые последующие значения интерпретируются как параметры неявных команд относительного горизонтального LineTo (h).

Формула: Po′ = Pn = {xo + dx, yo}

V y+

Рисует вертикальную линию от текущей точки до конечной точки, заданной параметром y и координатой x текущей точки. Любые последующие значения интерпретируются как параметры неявных команд абсолютного вертикального LineTo (V).

Формула: Po′ = Pn = {xo, y}

v dy+

Рисует вертикальную линию от текущей точки до конечной точки, заданной текущей точкой, смещённой на dy вдоль оси y, и координатой x текущей точки. Любые последующие значения интерпретируются как параметры неявных команд относительного вертикального LineTo (v).

Формула: Po′ = Pn = {xo, yo + dy}

Примеры

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- LineTo commands with absolute coordinates -->
  <path
    fill="none"
    stroke="red"
    d="M 10,10
           L 90,90
           V 10
           H 50" />

  <!-- LineTo commands with relative coordinates -->
  <path
    fill="none"
    stroke="red"
    d="M 110,10
           l 80,80
           v -80
           h -40" />
</svg>

Кубическая кривая Безье

Кубические кривые Безье — это плавные кривые, задаваемые четырьмя точками:

начальная точка (текущая точка)

(Po = {xo, yo})

конечная точка

(Pn = {xn, yn})

начальная контрольная точка

(Pcs = {xcs, ycs}) (задаёт кривизну в начале кривой)

конечная контрольная точка

(Pce = {xce, yce}) (задаёт кривизну в конце кривой)

После рисования конечная точка (Pn) становится текущей точкой для следующей команды (Po′).

Команда Параметры Примечания
C (x1,y1, x2,y2, x,y)+

Рисует кубическую кривую Безье от текущей точки до конечной точки, заданной координатами x,y. Начальная контрольная точка задаётся координатами x1,y1, а конечная контрольная точка — координатами x2,y2. Любые последующие тройки пар координат интерпретируются как параметры неявных команд абсолютной кубической кривой Безье (C).

Формулы:
Po′ = Pn = {x, y} ;
Pcs = {x1, y1} ;
Pce = {x2, y2}
c (dx1,dy1, dx2,dy2, dx,dy)+

Рисует кубическую кривую Безье от текущей точки до конечной точки, которая является текущей точкой, смещённой на dx вдоль оси x и на dy вдоль оси y. Начальная контрольная точка — это текущая точка (начальная точка кривой), смещённая на dx1 вдоль оси x и на dy1 вдоль оси y. Конечная контрольная точка — это текущая точка (начальная точка кривой), смещённая на dx2 вдоль оси x и на dy2 вдоль оси y. Любые последующие тройки пар координат интерпретируются как параметры неявных команд относительной кубической кривой Безье (c).

Формулы:
Po′ = Pn = {xo + dx, yo + dy} ;
Pcs = {xo + dx1, yo + dy1} ;
Pce = {xo + dx2, yo + dy2}
S (x2,y2, x,y)+ Рисует плавную кубическую кривую Безье от текущей точки до конечной точки, заданной координатами x,y. Конечная контрольная точка задаётся координатами x2,y2. Начальная контрольная точка является отражением конечной контрольной точки предыдущей команды кривой относительно текущей точки. Если предыдущая команда не была командой кубической кривой Безье, начальная контрольная точка совпадает с начальной точкой кривой (текущей точкой). Любые последующие пары координат интерпретируются как параметры неявных команд абсолютной плавной кубической кривой Безье (S).
s (dx2,dy2, dx,dy)+ Рисует плавную кубическую кривую Безье от текущей точки до конечной точки, которая является текущей точкой, смещённой на dx вдоль оси x и на dy вдоль оси y. Конечная контрольная точка — это текущая точка (начальная точка кривой), смещённая на dx2 вдоль оси x и на dy2 вдоль оси y. Начальная контрольная точка является отражением конечной контрольной точки предыдущей команды кривой относительно текущей точки. Если предыдущая команда не была командой кубической кривой Безье, начальная контрольная точка совпадает с начальной точкой кривой (текущей точкой). Любые последующие пары координат интерпретируются как параметры неявных команд относительной плавной кубической кривой Безье (s).

Примеры

<svg
  viewBox="0 0 200 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Cubic Bézier curve with absolute coordinates -->
  <path
    fill="none"
    stroke="red"
    d="M 10,90
           C 30,90 25,10 50,10
           S 70,90 90,90" />

  <!-- Cubic Bézier curve with relative coordinates -->
  <path
    fill="none"
    stroke="red"
    d="M 110,90
           c 20,0 15,-80 40,-80
           s 20,80 40,80" />

  <!-- Highlight the curve vertex and control points -->
  <g id="ControlPoints">
    <!-- First cubic command control points -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5" />

    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5" />

    <!-- Second smooth command control points (the first one is implicit) -->
    <line
      x1="50"
      y1="10"
      x2="75"
      y2="10"
      stroke="lightgrey"
      stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey" />

    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />

    <!-- curve vertex points -->
    <circle cx="10" cy="90" r="1.5" />
    <circle cx="50" cy="10" r="1.5" />
    <circle cx="90" cy="90" r="1.5" />
  </g>
  <use href="#ControlPoints" x="100" />
</svg>

Квадратичная кривая Безье

Квадратичные кривые Безье — это плавные кривые, задаваемые тремя точками:

начальная точка (текущая точка)

Po = {xo, yo}

конечная точка

Pn = {xn, yn}

контрольная точка

Pc = {xc, yc} (задаёт кривизну)

После рисования конечная точка (Pn) становится текущей точкой для следующей команды (Po′).

Команда Параметры Примечания
Q (x1,y1, x,y)+

Рисует квадратичную кривую Безье от текущей точки до конечной точки, заданной координатами x,y. Контрольная точка задаётся координатами x1,y1. Любые последующие пары координат интерпретируются как параметры неявных команд абсолютной квадратичной кривой Безье (Q).

Формулы:
Po′ = Pn = {x, y} ;
Pc = {x1, y1}
q (dx1,dy1, dx,dy)+

Рисует квадратичную кривую Безье от текущей точки до конечной точки, которая является текущей точкой, смещённой на dx вдоль оси x и на dy вдоль оси y. Контрольная точка — это текущая точка (начальная точка кривой), смещённая на dx1 вдоль оси x и на dy1 вдоль оси y. Любые последующие пары координат интерпретируются как параметры неявных команд относительной квадратичной кривой Безье (q).

Формулы:
Po′ = Pn = {xo + dx, yo + dy} ;
Pc = {xo + dx1, yo + dy1}
T (x,y)+

Рисует плавную квадратичную кривую Безье от текущей точки до конечной точки, заданной координатами x,y. Контрольная точка является отражением контрольной точки предыдущей команды кривой относительно текущей точки. Если предыдущая команда не была командой квадратичной кривой Безье, контрольная точка совпадает с начальной точкой кривой (текущей точкой). Любые последующие пары координат интерпретируются как параметры неявных команд абсолютной плавной квадратичной кривой Безье (T).

Формула:
Po′ = Pn = {x, y}
t (dx,dy)+

Рисует плавную квадратичную кривую Безье от текущей точки до конечной точки, которая является текущей точкой, смещённой на dx вдоль оси x и на dy вдоль оси y. Контрольная точка является отражением контрольной точки предыдущей команды кривой относительно текущей точки. Если предыдущая команда не была командой квадратичной кривой Безье, контрольная точка совпадает с начальной точкой кривой (текущей точкой). Любые последующие пары координат интерпретируются как параметры неявных команд относительной плавной квадратичной кривой Безье (t).

Формулы:
Po′ = Pn = {xo + dx, yo + dy}

Примеры

<svg
  viewBox="0 0 200 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Quadratic Bézier curve with implicit repetition -->
  <path
    fill="none"
    stroke="red"
    d="M 10,50
           Q 25,25 40,50
           t 30,0 30,0 30,0 30,0 30,0" />

  <!-- Highlight the curve vertex and control points -->
  <g>
    <polyline
      points="10,50 25,25 40,50"
      stroke="rgb(0 0 0 / 20%)"
      fill="none" />
    <circle cx="25" cy="25" r="1.5" />

    <!-- Curve vertex points -->
    <circle cx="10" cy="50" r="1.5" />
    <circle cx="40" cy="50" r="1.5" />

    <g id="SmoothQuadraticDown">
      <polyline
        points="40,50 55,75 70,50"
        stroke="rgb(0 0 0 / 20%)"
        stroke-dasharray="2"
        fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>

    <g id="SmoothQuadraticUp">
      <polyline
        points="70,50 85,25 100,50"
        stroke="rgb(0 0 0 / 20%)"
        stroke-dasharray="2"
        fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>

    <use href="#SmoothQuadraticDown" x="60" />
    <use href="#SmoothQuadraticUp" x="60" />
    <use href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>

Дуга эллипса

Дуги эллипса — это кривые, представляющие собой часть эллипса. Иногда с помощью дуги эллипса проще нарисовать кривые правильной формы, чем с помощью кривой Безье.

Команда Параметры Примечания
A (rx ry angle large-arc-flag sweep-flag x y)+

Рисует дугу от текущей точки до координат x,y. Центр эллипса, используемого для рисования дуги, определяется автоматически на основе остальных параметров команды:

  • rx и ry — две полуоси эллипса;
  • angle задаёт поворот эллипса относительно оси x (в градусах);
  • large-arc-flag и sweep-flag позволяют выбрать рисуемую дугу, поскольку остальные параметры допускают четыре варианта дуги.
    • large-arc-flag позволяет выбрать большую (1) или малую (0) дугу;
    • sweep-flag позволяет выбрать дугу, направленную по часовой стрелке (1) или против часовой стрелки (0)
Координаты x,y становятся новой текущей точкой для следующей команды. Все последующие наборы параметров считаются неявными командами абсолютной дуги (A).
a (rx ry angle large-arc-flag sweep-flag dx dy)+

Рисует дугу от текущей точки до точки, координаты которой получены смещением текущей точки на dx вдоль оси x и на dy вдоль оси y. Центр эллипса, используемого для рисования дуги, определяется автоматически на основе остальных параметров команды:

  • rx и ry — две полуоси эллипса;
  • angle задаёт поворот эллипса относительно оси x (в градусах);
  • large-arc-flag и sweep-flag позволяют выбрать рисуемую дугу, поскольку остальные параметры допускают четыре варианта дуги.
    • large-arc-flag позволяет выбрать большую (1) или малую (0) дугу;
    • sweep-flag позволяет выбрать дугу по часовой стрелке (1) или против часовой стрелки (0)
Координаты X и Y текущей точки для следующей команды смещаются на dx и dy. Все последующие наборы параметров считаются неявными командами относительной дуги (a).

Примеры

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- The influence of the arc flags with which the arc is drawn -->
  <path
    fill="none"
    stroke="red"
    d="M 6,10
           A 6 4 10 1 0 14,10" />

  <path
    fill="none"
    stroke="lime"
    d="M 6,10
           A 6 4 10 1 1 14,10" />

  <path
    fill="none"
    stroke="purple"
    d="M 6,10
           A 6 4 10 0 1 14,10" />

  <path
    fill="none"
    stroke="pink"
    d="M 6,10
           A 6 4 10 0 0 14,10" />
</svg>

ClosePath

Инструкции ClosePath рисуют прямую линию от текущей позиции до первой точки пути.

Команда Параметры Примечания
Z, z Замыкает текущий подпуть, соединяя последнюю точку пути с его начальной точкой. Если координаты этих точек различаются, между ними рисуется прямая линия.

Примечание: Внешний вид фигуры, замкнутой с помощью ClosePath, может отличаться от фигуры, замкнутой рисованием линии до начала пути с помощью другой команды: концы линии соединяются (в соответствии с настройкой stroke-linejoin), а не просто располагаются в одних и тех же координатах.

Примеры

<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
  <!--
  An open shape with the last point of
  the path different to the first one
  -->
  <path
    stroke="red"
    d="M 5,1
           l -4,8 8,0" />

  <!--
  An open shape with the last point of
  the path matching the first one
  -->
  <path
    stroke="red"
    d="M 15,1
           l -4,8 8,0 -4,-8" />

  <!--
  A closed shape with the last point of
  the path different to the first one
  -->
  <path
    stroke="red"
    d="M 25,1
           l -4,8 8,0
           z" />
</svg>

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

Спецификация
Scalable Vector Graphics (SVG) 2>
# DProperty>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)>
# GlyphElementDAttribute>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)>
# DAttribute>

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

Настольные компьютеры Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome для Android Firefox для Android Opera для Android Safari для iOS Samsung Internet WebView для Android WebView для iOS
d 1 12 1.5 8 3 18 4 14 3 1.0 3 3
path 52 79 97 60 Нет 52 97 51 Нет 6.0 52 Нет

См. также

  • Элемент SVG <path>
  • Свойство CSS d

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API