Элемент «path» документа SVG |

Поделиться с друзьями

Элемент «path» самый гибкий элемент из всех элементов SVG. С его помощью можно нарисовать любой простой элемент, вроде круга, прямоугольника, эллипса и т.д. Хотя предназначен этот элемент для рисования сложных кривых.

Элемент «path» имеет два атрибута:

d – определяет контур фигуры и называется сегментом данных;
pathLength – общая длина элемента вычисленная автором, в пользовательских единицах. Насколько я понял, необходима для вычисления длины пути браузером в единицах браузера. Этот параметр имеет значение при создании эффектов текста, движения и различных операциях с чертами.

Атрибут d элемента «path» может содержать инструкции moveto, line, curve, arc, closepath.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="<a href="http://www.w3.org/2000/svg">
          http://www.w3.org/2000/svg</a>" version="1.1">
  <title>Example triangle01- simple example of a «path»</title>
  <desc>A path that draws a triangle</desc>

  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
</svg>

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

Все инструкции описываются одним символом (вместо moveto пишем M).
Лишние пробела и разделители можно удалять (например, “M 100 100 L 200 200” содержит пробелы, которые не нужны для восприятия его браузером, поэтому пишем так “M100 100L200 200”).
Можно не повторять командные символы, которые указаны в документе несколько раз подряд (“L” в этой строке повторяется дважды “M 100 200 L 200 100 L -100 -200”, поэтому можно писать так “M 100 200 L 200 100 -100 -200”.
Можно использовать командные символы в нижнем регистре для указания относительных координат.

Команда «moveto»

Команда «moveto» (M или m) устанавливает новую текущую точку. Можно представить себе, что при указании «moveto» автор поднимает карандаш и перемещает его на новое место. Сегмент данных d (если он один) всегда должен начинаться с команды «moveto». Если «moveto» не первая команда, то создается новый подэлемент элемента «path» (возникает разрыв между первым подэлементом начинающимся с «moveto» и следующим).

Команда «moveto» не имеет параметров.

Команда «closepath»

Команда ’closepath’ (Z или z) завершает текущий подэлемент элемента «path» и автоматически создает прямую линию, соединяющую текущую точку с точкой начала подэлемента элемента «path». Если «closepath» следует сразу после «moveto», то «moveto» становится точкой начала для следующего подэлемента. Если «closepath» следует за какой-то другой командой, то точкой начала нового подэлемента становится точка начала текущего подэлемента.

Команда «closepath» не имеет параметров.

Команда «lineto»

Команда «lineto» рисует линию из текущей точки в новую точку.

Команда: L или l
Имя: lineto
Параметры: (x,y)+
Описание: Рисует линию из текущей точки в указанные (x,y) координаты, которые становятся текущей точкой. L указывает координаты в абсолютной системе координат, l в относительной.

Команда: H или h
Имя: horizontal lineto
Параметры: x+
Описание: Рисует горизонтальную линию из текущей точки (x_тек,y_тек) в новую точку (x, y_тек). H для абсолютной системы координат, h – для относительной.

Команда: V или v
Имя: vertical lineto
Параметры: y+
Описание: Рисует горизонтальную линию из текущей точки (x_тек y_тек) в новую точку (x_тек y). V для абсолютной системы координат, v – для относительной.

Команды создания кривых

Всего три группы команд для рисования кривых:

Кубическая кривая Безье (C или c, S или s). Кубическая кривая Безье описывается начальной точкой, конечной точкой и двумя контрольными точками.
Квадратичная кривая Безье (Q или q, T или t). Квадратичная кривая Безье описывается начальной точкой, конечной точкой и одной контрольной точкой.
Дуга эллипса (A или a). Эта фигура отображает сегмент окружности.

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

Команда: C или c
Имя: curveto
Параметры: (x1 y1 x2 y2 x y)+
Описание: Рисует кубическую кривую Безье из текущей точки до точки (x y), используя (x1 y1) как контрольную точку начала кривой и (x2 y2) как контрольную точку конца кривой.

Команда: S или s
Имя: shorthand/smooth curveto
Параметры: (x2 y2 x y)+
Описание: Рисует кубическую кривую Безье из текущей точки до точки (x, y). Первая контрольная точка создается автоматически, в соответствии с тем, как расположена вторая контрольная точка предыдущей команды. Если предыдущей команды нет или предыдущая команда не C, c, S или s, то первая контрольная точка совпадает с текущей точкой. (x2 y2) – это координаты второй контрольной точки, то есть контрольной точки конца кривой.

Ниже представлен простой пример использования

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
     xmlns="<a href="http://www.w3.org/2000/svg">
          http://www.w3.org/2000/svg</a>" version="1.1">
  <title>Example cubic01- cubic Bezier commands in path data</title>
  <desc>Picture showing a simple example of path data
        using both a "C" and an "S" command,
        along with annotations showing the control points
        and end points</desc>
  <style type="text/css"><![CDATA[
    .Border { fill:none; stroke:blue; stroke-width:1 }
    .Connect { fill:none; stroke:#888888; stroke-width:2 }
    .SamplePath { fill:none; stroke:red; stroke-width:5 }
    .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
    .CtlPoint { fill:#888888; stroke:none }
    .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
    .Label { font-size:22; font-family:Verdana }
  ]]></style>
  <rect class="Border" x="1" y="1" width="498" height="398" />
  <polyline class="Connect" points="100,200 100,100" />
  <polyline class="Connect" points="250,100 250,200" />
  <polyline class="Connect" points="250,200 250,300" />
  <polyline class="Connect" points="400,300 400,200" />
  <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
                                       S400,300 400,200" />
  <circle class="EndPoint" cx="100" cy="200" r="10" />
  <circle class="EndPoint" cx="250" cy="200" r="10" />
  <circle class="EndPoint" cx="400" cy="200" r="10" />
  <circle class="CtlPoint" cx="100" cy="100" r="10" />
  <circle class="CtlPoint" cx="250" cy="100" r="10" />
  <circle class="CtlPoint" cx="400" cy="300" r="10" />
  <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
  <text class="Label" x="25" y="70">M100,200 C100,
    100 250,100 250,200</text>
  <text class="Label" x="325" y="350"
        style="text-anchor:middle">S400,300 400,200</text>
</svg>

Ниже представлена картина того, как расположение контрольных точек влияет на форму кривой. Первые пять примеров иллюстрируют одиночный сегмент кривой Безье. Справа снизу представлен пример использования команды S после команды C.

Примеры кривой Безье на одиночном сегменте

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

Команда: Q или q
Имя: quadratic Bezier curveto
Параметры: (x1 y1 x y)+
Описание: Рисует квадратичную кривую Безье из текущей точки до точки (x y), используя (x1 y1) как контрольную точку.

Команда: T или t
Имя: Shorthand/smooth quadratic Bezier curveto
Параметры: (x y)+
Описание: Рисует квадратичную кривую Безье из текущей точки до точки (x y). Контрольная точка создается автоматически в соответствии с расположением контрольной точки предыдущей команды. Если до этого не было команды или предыдущая команда была не Q, q, T или t, то контрольная точка совпадает с текущей точкой.

Нижеследующий пример демонстрирует использование квадратичной кривой Безье.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
     xmlns="<a href="http://www.w3.org/2000/svg">
          http://www.w3.org/2000/svg</a>" version="1.1">
  <title>Example quad01 -
    quadratic Bezier commands in path data</title>
  <desc>Picture showing a "Q" a "T" command,
        along with annotations showing the control points
        and end points</desc>
  <rect x="1" y="1" width="1198" height="598"
        fill="none" stroke="blue" stroke-width="1" />
  <path d="M200,300 Q400,50 600,300 T1000,300"
        fill="none" stroke="red" stroke-width="5"  />
  <!-- End points -->
  <g fill="black" >
    <circle cx="200" cy="300" r="10"/>
    <circle cx="600" cy="300" r="10"/>
    <circle cx="1000" cy="300" r="10"/>
  </g>
  <!-- Control points and lines from end points to control points -->
  <g fill="#888888" >
    <circle cx="400" cy="50" r="10"/>
    <circle cx="800" cy="550" r="10"/>
  </g>
  <path d="M200,300 L400,50 L600,300 
           L800,550 L1000,300"
        fill="none" stroke="#888888" stroke-width="2" />
</svg>

Дуга эллипса

Команда: A или a
Имя: elliptical arc
Параметры: (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
Описание: Рисует дугу из текущей точки (x y). Размер и ориентация определяются двумя радиусами (rx, ry) и x-axis-rotation, который указывает, как будет повернут эллипс относительно координатной плоскости. Центр эллипса вычисляется автоматически. large-arc-flag и sweep-flag помогают автоматическому подсчету и прорисовке дуги.

Пример.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
     xmlns="<a href="http://www.w3.org/2000/svg">
          http://www.w3.org/2000/svg</a>" version="1.1">
  <title>Example arcs01 - arc commands in path data</title>
  <desc>Picture of a pie chart with two pie wedges and
        a picture of a line with arc blips</desc>
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="1" />
  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
        fill="red" stroke="blue" stroke-width="5" />
  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="blue" stroke-width="5" />
  <path d="M600,350 l 50,-25 
           a25,25 -30 0,1 50,-25 l 50,-25 
           a25,50 -30 0,1 50,-25 l 50,-25 
           a25,75 -30 0,1 50,-25 l 50,-25 
           a25,100 -30 0,1 50,-25 l 50,-25"
        fill="none" stroke="red" stroke-width="5"  />
</svg>

Команда A или a рисует сегмент эллипса, который имеет некоторые ограничения

дуга начинается из текущей точки;
дуга заканчивается в точке (x y);
эллипс имеет два радиуса (rx ry);
поворот относительно оси x определяется параметром x-axis-rotation

В большинстве случаев существует четыре различные дуги (два эллипса каждый состоит из двух дуг), которые соответствуют этим ограничениям. large-arc-flag и sweep-flag указывают, какая из дуг будет нарисована.

large-arc-flag определяет, большая или маленькая дуга будет нарисована. Если large-arc-flag равен 1, то будет нарисована одна из больших дуг. Если он равен 0, то будет нарисована одна из маленьких дуг.
Если sweep-flag равен 1, то дуга будет нарисована в сторону роста угла (представьте, что внутри эллипса есть часовая стрелка и если дуга нарисована от начальной точки к конечной по ходу часовой стрелки). Если sweep-flag равен 0, то дуга будет нарисована наоборот, то есть в сторону уменьшения угла.

Пример, в котором знаки вопроса ?,? заменяются последовательно на “0,0” “0,1” “1,0” and “1,1”

<path d="M 125,75 a100,50 0 ?,? 100,50"
      style="fill:none; stroke:red; stroke-width:6"/>

Saqwel

Элемент «path» документа SVG

Команда «moveto»

Команда «closepath»

Команда «lineto»

Команды создания кривых

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

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

Дуга эллипса

Leave a Reply Cancel reply