Spec-Zone.ru › SVG

d

Атрибут d определяет путь, который нужно нарисовать.

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

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

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

Пример

html
<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>, d является строкой, содержащей серию команд пути, которые определяют путь для рисования.

Значение <строка>
Значение по умолчанию none
Анимируемо Да

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

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

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

css
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"
  );
}
html
<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.

Команды пути

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

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

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

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

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

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

Команды пути 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}

Примеры

html
<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>
END_OF_DOCUMENT_MARKER

Команды пути 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 текущей точки по оси Y. Любые последующие значения интерпретируются как параметры для неявной относительной горизонтальной команды LineTo (h) .

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

V y+

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

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

v dy+

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

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

Примеры

html
<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) .

Примеры

html
<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}

Примеры

html
<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 позволяют выбрать, какая дуга должна быть отрисована, так как из других параметров можно получить 4 возможных дуги.
    • 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 позволяют выбрать, какая дуга должна быть отрисована, так как из других параметров можно получить 4 возможных дуги.
    • large-arc-flag позволяет выбрать большую дугу (1) или малую дугу (0),
    • sweep-flag позволяет выбрать дугу по часовой стрелке (1) или против часовой стрелки (0)
Текущая точка смещается на dx и dy по осям X и Y для следующей команды. Все последующие наборы параметров интерпретируются как неявные относительные команды дуги кривой (a).

Примеры

html
<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 настройкой), а не просто размещены в одних и тех же координатах.

Примеры

html
<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>

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

Спецификация
Векторная графика с масштабированием (SVG) 2
# DProperty
Векторная графика с масштабированием (SVG) 1.1 (Второе издание)
# GlyphElementDAttribute
Векторная графика с масштабированием (SVG) 1.1 (Второе издание)
# DAttribute

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

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

См. также

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

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

Spec-Zone.ru

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