Масштабируемая векторная графика (Scalable Vector Graphics)

Элемент Path

Разбить на страницы
Показывать лекцию целиком
Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

Объект Path

Объект Path позволяет создавать фигуры, к которым могут быть применены все атрибуты оформления– заливка, градиент, штриховка. Он может представлять замкнутые фигуры – такие как полигон, а также разомкнутые – такие как линия.

Фигура, образуемая объектом Path, состоит из отрезков прямых или дуг, которые строятся последовательно, от точки к точке. Для этого используются следующие команды: moveTo ( M ) (установить опорную точку), lineTo ( L ) (провести линию), horizontalLineTo ( H ) (провести горизонтальную линию), verticalLineTo ( V ) (провести вертикальную линию) and closePath ( Z ) (завершить построение объекта Path ), cubic bezier curve ( C,S ) (провести кубическую кривую Безье) , quadratic bezier curve ( Q,T ) (провести квадратичную кривую Безье), and elliptical arc ( A ) (провести эллиптическую кривую).

Координаты объекта задаются следующим образом:

<path d="M15,15 L185,15 Z"/>

Здесь d – атрибут, определяющий Path. Далее устанавливается опорная точка – M 15,15. От этой опорной точки проводится линия к точке с координатами 185, 15. Команда Z завершает рисование объекта – при этом происходит возврат к опорной точке.

Различают абсолютные и относительные команды. При работе с абсолютными командами все координаты задаются в системе рисунка, т.е начало отсчета располагается в верхнем левом углу документа. (Рис. 3.1, А).

(рис 3.1) Абсолютная (А) и относительная команда (Б)

Соответствующие координаты называются абсолютными. При проведении линии L 185,15 происходит перемещение в точку, лежащую правее опорной точки на 170 пикселей (рис. 3.1, Б). Ординаты у них равные. Следовательно, можно рассматривать опорную точку в качестве точки начала отсчета и записывать перемещение так:

<path d="M15,15 l170,0 z"/>

Это относительная запись команды – ее название ( lineTo ) указывается строчной буквой. Если фигура состоит из нескольких точек, то при относительной форме записи каждая предыдущая точка становится точкой отсчета для последующей команды. Соответствующие этому случаю координаты называются относительными.

Для атрибута d справедливы следующие правила:

  • Пробелы могут быть опущены:
    <path d="M15,15L185,15Z">
  • Запятые, отделяющие пары координат, могут быть опущены:
    <path d="M15 15 L 185 15 Z">

  • Повторяющиеся команды могут быть опущены:

    <path d="M15,15 L185,15 185,85 15,85 Z"> – эквивалентная запись: <path d="M15,15 L185,15 L185,85 L15,85 Z">

  • Дробные части координат отделяются точкой, причем если число начинается с нуля, он может быть опущен:

    <path d="M0,0 L .5.6 Z"/> – эквивалентная запись: <path d="M0,0 L 0.5, 0.6 Z"/>

    •

    Эти правила предназначены для сокращения размера кода. Для удобства визуального восприятия, однако, мы далее будем применять самую понятную форму записи – с разделением запятыми пар координат и с пробелами:

    <path d="M15,15 L185,15 Z"/>

    Линии и формы

    Группа команд для рисования линий и форм – самая простая группа объекта Path. В этом случае создаваемые линии представляют собой отрезки прямых, заключенных заданными точками. В табл. 3.1 приводится описание команд.

    Команды для рисования линий и форм.
    КомандаОписаниеПараметры
    M/m ( moveTo ) Установка точки отсчета. Следующие команды будут использовать эту точку в качестве опорной Координаты ( x, y ) опорной точки.
    L/l ( lineTo ) Рисование линии от текущей точки до заданной. Координаты ( x, y ) заданной точки. Добавляемая точка становится опорной.
    H/h ( horizontalLineTo ) Рисование горизонтальной линии от текущей точки до заданной. Координата x заданной точки. Координата y будет равна ординате текущей точки. Добавляемая точка становится опорной.
    V/v ( verticalLineTo ) Рисование вертикальной линии от текущей точки до заданной. Координата y заданной точки. Координата x будет равна абсциссе текущей точки. Добавляемая точка становится опорной.
    Z/z ( closePath ) Завершение рисования линии от опорной точки. Без параметров.

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

    Примеры линий и форм.
    № Код Вид в браузере
    3.2.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
<desc>
          Пример linesAndShapes.svg
     </desc>
     <path d="M15,15 L185,15 L185,85 L15,85 Z"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
    Описание
    В начале задается опорная точка M 15,15. От нее проводится линия в точку с координатами L 185,15. Далее добавляются еще две линии – L185,85 и L 15,85. Команда Z завершает объект Path, соединяя отрезком точку 15, 185 с опорной точкой.
    № Код Вид в браузере
    3.2.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes2.svg
     </desc>
     <path d="M15,15 l170,0 L185,85 l-170,0 z"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
    Описание
    В начале задается опорная точка M 15,15. От нее проводится линия в точку, с той же самой ординатой и лежащей правее на 170 пикселей при помощи относительной команды l 170, 0. Далее при помощи абсолютной команды L 185,85 добавляется линия. Точка с координатами 185, 85 становится точкой начала отсчета. От нее проводится линия в точку, с той же самой ординатой и лежащей левее на 170 пикселей. Следовательно, теперь команда будет принимать отрицательную абсциссу: l-170, 0 Относительная команда z завершает объект Path, соединяя отрезком последнюю точку с опорной.
    № Код Вид в браузере
    3.2.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes3.svg
     </desc>
     <path d="M15,15 H185 M185,15 V85 M185,85 H15 M15,85 V15"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
    Описание
    В начале задается опорная точка M 15,15. От нее проводится горизонтальная линия в точку 185, 15 при помощи команды H 185, причем в качестве ординаты берется соответствующее значение опорной точки. Далее устанавливается новая опорная точка M 185, 15 и от нее проводится вертикальная линия V85, теперь в качестве абсциссы берется соответствующее значение новой опорной точки. Снова добавляется опорная точка M 185,85, проводится горизонтальная линия H15. Наконец, добавляется последняя опорная точка M 15, 85 и вертикальная линия V15 соединяет ее с исходной точкой.
    № Код Вид в браузере
    3.2.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes4.svg
     </desc>
     <path d="M15,15 h170 M185,15 v70 M185,85 h-170 M15,85 v-70"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
    Описание
    При использовании относительных команд каждая добавляемая опорная точка становится началом отсчета. В этом примере четыре пары "опорная точка – относительная команда": 1) M15,15 h170 2) M185,15 v70 3) M185,85 h-170 4) M15,85 v-70
    № Код Вид в браузере
    3.2.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes5.svg
     </desc>
     <path d="M100,10  L105.8,27.2 123.8,27.2 109.4,38
                     114.6,55.2 100,45 85.4,55.2 90.6,38
                     76.2,27.2 94.2,27.2"
style="fill:red"/>
</svg>
    Описание
    В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Исходные координаты взяты из примера polygon5.svg (см. Лекцию 2).
    № Код Вид в браузере
    3.2.6 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes6.svg
     </desc>
     <path d="M100,10  L121.6,22.5  121.6,47.5
              100,60  78.4,47.52  78.4,22.5 Z
"
style="fill:dodgerblue; stroke:blue; stroke-width:5"/>
</svg>
    Описание
    В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Для завершения фигуры добавляется команда Z (сравните вид фигуры без этой команды). Исходные координаты взяты из примера polygon6.svg (см. Лекцию 2).

    Кривые Безье третьего порядка (Cubic Bezier Curve)

    Кривые БезьеОтличные анимации, отражающие процесс построения кривых Безье, вы можете увидеть здесь: http://ru.wikipedia.org/wiki/Кривая_Безье , представляющие мощное средство рисования, знакомы пользователям таких графических пакетов, как Adobe Illustrator, Macromedia Freehand или Corel Draw. Для рисования кубических кривых Безье (кривых третьего порядка) в SVG графике поддерживается следующие команды (табл. 3.3):

    Команды для рисования кривых Безье
    КомандаОписаниеПараметры
    C / c ( curveTo ) Рисование кубической кривой Безье от текущей точки (mx, my) до заданной (x,y) с начальной контрольной точкой (x1, y1) и конечной (x2, y2) (рис. 3.2) x1, y1 x2, y2 x, y
    S / s ( shorthand/smooth CurveTo ) Рисование кубической кривой Безье от текущей точки (mx, my) до заданной (x,y). Начальная контрольная точка представляет собой отражение конечной контрольной точки предыдущей команды. Для конечной контрольной точки задаются координаты (x2, y2) x2, y2 x, y
    (рис 3.2) Рисование кубической кривой Безье(рис 3.4) Рисование кубической кривой Безье
    Примеры кривых Безье
    № Код Вид в браузере
    3.4.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve1.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C25,15 175,15 175,75" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="15" x2="25" y2="75"
      stroke-width="3" stroke="green"/>
<line x1="175" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="25" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    В начале задается опорная точка M 25, 75. Далее указываются две контрольные точки 25, 15 и 175, 15, а затем конечная точка 175,75. Вспомогательные фигуры добавлены для отображения построения кривой. Закомментируйте их ( или удалите) для просмотра самой кривой в чистом виде.
    № Код Вид в браузере
    3.4.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve2.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 c0,-60 150,-60 150,0" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="175" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="25" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    В начале задается опорная точка M 25, 75. Далее указываются две контрольные точки 0,-60 и 150,-60, координаты которых отсчитываются относительно опорной. Затем добавляется конечная точка с координатами 150,0 также относительно опорной.
    № Код Вид в браузере
    3.4.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve3.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C5,15 195,15 175,75" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="5" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="195" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="5" cy="15"  r="4" fill="red"/>
<circle cx="195" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Более вогнутая кривая по сравнению с примером CubicCurve1.svg. Используются абсолютные координаты (см. рис. 3.3)
    № Код Описание
    3.4.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve4.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 c-20,-60 170,-60 150,0" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="5" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="195" y1="15" x2="175" y2="75" 
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="5" cy="15"  r="4" fill="red"/>
<circle cx="195" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    		 Точно такой же результат получается при использовании относительных координат. (см. рис. 3.3).
    Вид в браузере
    (рис 3.3) Абсолютные и относительные координаты для примеров CubicCurve3.svg и CubicCurve4.svg
    № Код Вид в браузере
    3.4.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve5.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C40,15 160,15 175,75" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="40" y2="15" 
      stroke-width="3" stroke="green"/>
<line x1="160" y1="15" x2="175" y2="75" 
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="40" cy="15"  r="4" fill="red"/>
<circle cx="160" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Более выпуклая кривая по сравнению с примером CubicCurve1.svg. Используются абсолютные координаты.
    № Код Вид в браузере
    3.4.6 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve6.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 c15,-60 135,-60 150,0" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="40" y2="15" 
      stroke-width="3" stroke="green"/>
<line x1="160" y1="15" x2="175" y2="75" 
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="40" cy="15"  r="4" fill="red"/>
<circle cx="160" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Точно такой же результат получается при использовании относительных координат.
    № Код Вид в браузере
    3.4.7 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="180"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve7.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C40,15 160,135 175,75"
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="40" y2="15"
      stroke-width="3" stroke="green"/>
<line x1="160" y1="135" x2="175" y2="75" 
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="40" cy="15"  r="4" fill="red"/>
<circle cx="160" cy="135"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Кривая с параллельными отрезками, соединяющими опорные и контрольные точки.
    № Код Описание
    3.4.8 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve8.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C25,15 175,15 175,75 S 325,135 325,75" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="175" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<line x1="325" y1="75" x2="325" y2="135"
      stroke-width="3" stroke="blue"/>
<line x1="175" y1="75" x2="175" y2="135"
      stroke-width="3" stroke="green" stroke-dasharray="5"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="175" cy="135"  r="4" fill="red"/>
<circle cx="25" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
<circle cx="325" cy="135"  r="4" fill="magenta"/>
</svg>
    		 После завершения кривой Безье добавляется команда S 325,135 325,75 которая использует в качестве первой контрольной точки отражение последней точки 175,15 предыдущей команды (см. рис. 3.4)
    Вид в браузере.
    (рис 3.4) Команда S 325,135 325,75
    № Код Описание
    3.4.9 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve9.svg
     </desc>
     <!--Объект Path-->
          <path d="M25,75 c0,-60 150,-60 150,0 s 150,60 150,0" 
                style="fill:none; stroke:green;stroke-width:3"/>
<!--Вспомогательные фигуры-->
<line x1="25" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="175" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<line x1="325" y1="75" x2="325" y2="135"
      stroke-width="3" stroke="blue"/>
<line x1="175" y1="75" x2="175" y2="135"
      stroke-width="3" stroke="green" stroke-dasharray="5"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="175" cy="135"  r="4" fill="red"/>
<circle cx="25" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
<circle cx="325" cy="135"  r="4" fill="magenta"/>
</svg>
    		 Здесь получается та же самая фигура, что и в примере CubicCurve8.svg, но с использованием относительных координат. Для команды c0,-60 150,-60 150,0 началом отсчета является первая опорная точка, для команды s 150,60 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой. (рис. 3.5)
    Вид в браузере.
    (рис 3.5) Абсолютные и относительные координаты для примеров CubicCurve8.svg и CubicCurve9.svg

    Кривые Безье второго порядка (Quadratic Bezier Curves)

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

    Команды для рисования кривых Безье четвертого порядка
    КомандаОписаниеПараметры
    Q / q ( quadratic Bezier curveTo ) Рисование квадратичной кривой Безье от текущей точки (mx, my) до заданной (x,y) с контрольной точкой (x1, y1) (рис. 3.6). x1, y1 x,y
    T / t ( shorthand/ smooth quadratic Bezier CurveTo ) Рисование кубической кривой Безье от текущей точки до заданной (x,y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды. x,y
    (рис 3.6) Рисование квадратичной кривой Безье

    Наличие одной контрольной точки позволяет гораздо быстрее получать нужные кривые при написании кода.

    Примеры кривых Безье четвертого порядка
    № Код Вид в браузере
    3.6.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve1.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 Q100,25 175,75" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Простейшая квадратичная кривая Безье. Контрольная точка равноудалена от опорных.
    № Код Вид в браузере
    3.6.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve2.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 q75,-50 150,0" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Точно такая же кривая, как в примере QuadraticCurve1.svg, но используется относительная команда.
    № Код Вид в браузере
    3.6.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="350" height="150"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve3.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 Q100,25 175,75 T 325,75" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="250" y2="125"
      stroke-width="3"  stroke="green" stroke-dasharray="5"/>
<line x1="250" y1="125" x2="325" y2="75"
      stroke-width="3"  stroke="blue"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="250" cy="125"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
</svg>
    Описание
    После завершения квадратичной кривой добавляется команда T 325,75, которая использует в качестве своей контрольной точки отражение контрольной точки 100, 25 предыдущей команды (см. рис. 3.7)
    № Код Описание
    3.6.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="350" height="150"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve4.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 q75,-50 150,0 t 150,0" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="250" y2="125"
      stroke-width="3"  stroke="green" stroke-dasharray="5"/>
<line x1="250" y1="125" x2="325" y2="75"
      stroke-width="3"  stroke="blue"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="250" cy="125"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
</svg>
    		 Здесь получается та же самая фигура, что и в примере QuadraticCurve3.svg, но с использованием относительных координат. Для команды q75,-50 150,0 началом отсчета является первая опорная точка, для команды t 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой. (рис. 3.7)
    Вид в браузере.
    (рис 3.7) Абсолютные и относительные координаты для примеров QuadraticCurve3.svg и QuadraticCurve4svg
    № Код Описание
    3.6.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="700" height="150"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve5.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 Q100,25 175,75 T 325,75 T475, 75 T 625,75" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="250" y2="125"
      stroke-width="3"  stroke="green" stroke-dasharray="5"/>
<line x1="250" y1="125" x2="325" y2="75"
      stroke-width="3"  stroke="blue"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="250" cy="125"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
<circle cx="475" cy="75"  r="4" fill="magenta"/>
<circle cx="625" cy="75"  r="4" fill="magenta"/>
</svg>
    		 При рисовании кривых с повторяющимися фрагментами удобно использовать команду T для упрощения кода. В данном примере все команды используют первую опорную точку M 25, 75
    Вид в браузере

    Эллиптические кривые (Elliptical Curves)

    Эллиптические кривые представляют собой фрагменты эллипсов (дуги). Для их создания используются команды, приведенные в табл. 3.7.

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

    В отличие от рисования кривых Безье команда эллиптической кривой содержит достаточно большое число параметров. Параметры mx, my, x, y, rx, ry наглядно видны, более сложно понять x-axis-rotation, large-arc-flag, sweep-flag. Рассмотрим их на примерах табл. 3.8

    Примеры эллиптических кривых.
    № Код Вид в браузере
    3.8.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve1.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 A50,25 0 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Рисование кривой, которая представляет собой 3/4 эллипса. Значения пары large-arc-flag, sweep-flag: 1,0. Для формирования представления о размерах самого SVG документа добавлена рамка.
    № Код Вид в браузере
    3.8.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve2.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 a50,25 0 1,0 50,25"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Здесь получается та же самая фигура, что и в примере EllipticalCurve1.svg, но с использованием относительных координат.
    № Код Вид в браузере
    3.8.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve3.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 A50,25 0 0,1 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Значения параметров, описывающих кривую, совпадают в точности со значениями примера EllipticalCurve1.svg за исключением пары large-arc-flag, sweep-flag, которая здесь равна 0,1
    № Код Вид в браузере
    3.8.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve4.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 A50,25 0 0,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Значения параметров, описывающих кривую, совпадают в точности со значениями примера EllipticalCurve1.svg за исключением пары large-arc-flag, sweep-flag, которая здесь равна 0,0
    № Код Вид в браузере
    3.8.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve5.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 A50,25 0 1,1 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Значения параметров, описывающих кривую, совпадают в точности со значениями примера EllipticalCurve1.svg за исключением пары large-arc-flag, sweep-flag, которая здесь равна 1,1

    Рассмотренные примеры 3.8.1 - 3.8.5 позволяют сделать вывод: пара значений large-arc-flag, sweep-flag отвечают за то, какая часть фигуры, формируемая пересечением двух эллипсов, будет видна (рис. 3.9):

    (рис 3.9) Все возможные значения пары large-arc-flag, sweep-flag и формируемая ими кривая. (ArcForm.svg)

    Рассмотрим теперь последний "неявный" параметр x-axis-rotation (табл. 3.9)

    Примеры эллиптических кривых. Параметр x-axis-rotation.
    № Код Вид в браузере
    3.9.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve6.svg
     </desc>
<!--Поворот объекта Path на 10 градусов-->
<path d="M100,100 A50,25 10 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 20 градусов-->
<path d="M100,100 A50,25 20 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 30 градусов-->
<path d="M100,100 A50,25 30 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 40 градусов-->
<path d="M100,100 A50,25 40 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 50 градусов-->
<path d="M100,100 A50,25 50 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Исходный объект Path-->
<path d="M100,100 A50,25 0 1,0 150,125"
stroke-width="3"  stroke="black"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
      
     stroke="blue" stroke-width="2" fill="none">
</rect>
</svg>
    Описание
    В этом примере расположено несколько кривых, отличающихся только параметром x-axis-rotation, который принимает значения 10, 20, 30, 40 и 50 градусов. Заметен поворот всей фигуры, как единого целого, относительно горизонтальной оси против часовой стрелки. При этом сохраняется привязка к опорным точкам.

    Экспорт графики и объект Path

    Мы закончили рассмотрение объекта Path. Мощные графические пакеты, такие как Corel Draw или Adobe Illustrator содержат развитые средства для работы с кривыми. При экспорте в формат SVG большая часть получаемого кода и представляет собой описание именно этого элемента (рис. 3.1):

    (рис 3.10) Преобразование рисунка в формат SVG в программе Corel Draw (CorelDraw_Plane.svg)

    При программном создании сложной кривой бывает трудно расставить контрольные точки. Можно было бы нарисовать кривую в Corel Draw, а затем экспортировать в SVG, но проблема заключается в том, что получаемые таким образом координаты содержат неудобные, дробные значения. Типичный фрагмент кода выглядит так (CorelDraw_Plane.svg):

    <clipPath id="id0">
  <path d="M0.00772 27.9351c0,-3.0984 0,-6.1968 0,-9.2952 0,-3.0984 0,-6.1968 0,-9.2952 0,-3.0984 
  0,-6.1968 0,-9.2952 1.80917,0 3.61834,0 5.42751,0 1.80917,0 3.61834,0 5.4275,0 1.80917,0 
  3.61834,0 5.42751,0 1.80916,0 3.61833,0 5.4275,0 0,3.0984 0,6.1968 0,9.2952 0,3.0984 
  0,6.1968 0,9.2952 0,3.0984 0,6.1968 0,9.2952 -1.80917,0 -3.61834,0 -5.4275,0 -1.80917,0 
  -3.61834,0 -5.42751,0 -1.80916,0 -3.61833,0 -5.4275,0 -1.80917,0 -3.61834,0 -5.42751,0z"/>
</clipPath>

    Программа Sketsa SVG Graphics Editor, с которой мы уже сталкивались в Лекции 1, позволяет более корректно определять координаты создаваемых кривых (рис. 3.11)

    (рис 3.11) Рисование кривой Безье в Sketsa SVG Graphics Editor

    Нарисованные при помощи инструментов кривые могут быть затем отредактированы непосредственно в режиме кода или вообще в другом внешнем редакторе.

    Страницы:
    Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

    Объект Path

    Объект Path позволяет создавать фигуры, к которым могут быть применены все атрибуты оформления– заливка, градиент, штриховка. Он может представлять замкнутые фигуры – такие как полигон, а также разомкнутые – такие как линия.

    Фигура, образуемая объектом Path, состоит из отрезков прямых или дуг, которые строятся последовательно, от точки к точке. Для этого используются следующие команды: moveTo ( M ) (установить опорную точку), lineTo ( L ) (провести линию), horizontalLineTo ( H ) (провести горизонтальную линию), verticalLineTo ( V ) (провести вертикальную линию) and closePath ( Z ) (завершить построение объекта Path ), cubic bezier curve ( C,S ) (провести кубическую кривую Безье) , quadratic bezier curve ( Q,T ) (провести квадратичную кривую Безье), and elliptical arc ( A ) (провести эллиптическую кривую).

    Координаты объекта задаются следующим образом:

    <path d="M15,15 L185,15 Z"/>

    Здесь d – атрибут, определяющий Path. Далее устанавливается опорная точка – M 15,15. От этой опорной точки проводится линия к точке с координатами 185, 15. Команда Z завершает рисование объекта – при этом происходит возврат к опорной точке.

    Различают абсолютные и относительные команды. При работе с абсолютными командами все координаты задаются в системе рисунка, т.е начало отсчета располагается в верхнем левом углу документа. (Рис. 3.1, А).

    (рис 3.1) Абсолютная (А) и относительная команда (Б)

    Соответствующие координаты называются абсолютными. При проведении линии L 185,15 происходит перемещение в точку, лежащую правее опорной точки на 170 пикселей (рис. 3.1, Б). Ординаты у них равные. Следовательно, можно рассматривать опорную точку в качестве точки начала отсчета и записывать перемещение так:

    <path d="M15,15 l170,0 z"/>

    Это относительная запись команды – ее название ( lineTo ) указывается строчной буквой. Если фигура состоит из нескольких точек, то при относительной форме записи каждая предыдущая точка становится точкой отсчета для последующей команды. Соответствующие этому случаю координаты называются относительными.

    Для атрибута d справедливы следующие правила:

  • Пробелы могут быть опущены:
    <path d="M15,15L185,15Z">
  • Запятые, отделяющие пары координат, могут быть опущены:
    <path d="M15 15 L 185 15 Z">

  • Повторяющиеся команды могут быть опущены:

    <path d="M15,15 L185,15 185,85 15,85 Z"> – эквивалентная запись: <path d="M15,15 L185,15 L185,85 L15,85 Z">

  • Дробные части координат отделяются точкой, причем если число начинается с нуля, он может быть опущен:

    <path d="M0,0 L .5.6 Z"/> – эквивалентная запись: <path d="M0,0 L 0.5, 0.6 Z"/>

    •

    Эти правила предназначены для сокращения размера кода. Для удобства визуального восприятия, однако, мы далее будем применять самую понятную форму записи – с разделением запятыми пар координат и с пробелами:

    <path d="M15,15 L185,15 Z"/>

    Линии и формы

    Группа команд для рисования линий и форм – самая простая группа объекта Path. В этом случае создаваемые линии представляют собой отрезки прямых, заключенных заданными точками. В табл. 3.1 приводится описание команд.

    Команды для рисования линий и форм.
    КомандаОписаниеПараметры
    M/m ( moveTo ) Установка точки отсчета. Следующие команды будут использовать эту точку в качестве опорной Координаты ( x, y ) опорной точки.
    L/l ( lineTo ) Рисование линии от текущей точки до заданной. Координаты ( x, y ) заданной точки. Добавляемая точка становится опорной.
    H/h ( horizontalLineTo ) Рисование горизонтальной линии от текущей точки до заданной. Координата x заданной точки. Координата y будет равна ординате текущей точки. Добавляемая точка становится опорной.
    V/v ( verticalLineTo ) Рисование вертикальной линии от текущей точки до заданной. Координата y заданной точки. Координата x будет равна абсциссе текущей точки. Добавляемая точка становится опорной.
    Z/z ( closePath ) Завершение рисования линии от опорной точки. Без параметров.

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

    Примеры линий и форм.
    № Код Вид в браузере
    3.2.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
<desc>
          Пример linesAndShapes.svg
     </desc>
     <path d="M15,15 L185,15 L185,85 L15,85 Z"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
    Описание
    В начале задается опорная точка M 15,15. От нее проводится линия в точку с координатами L 185,15. Далее добавляются еще две линии – L185,85 и L 15,85. Команда Z завершает объект Path, соединяя отрезком точку 15, 185 с опорной точкой.
    № Код Вид в браузере
    3.2.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes2.svg
     </desc>
     <path d="M15,15 l170,0 L185,85 l-170,0 z"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
    Описание
    В начале задается опорная точка M 15,15. От нее проводится линия в точку, с той же самой ординатой и лежащей правее на 170 пикселей при помощи относительной команды l 170, 0. Далее при помощи абсолютной команды L 185,85 добавляется линия. Точка с координатами 185, 85 становится точкой начала отсчета. От нее проводится линия в точку, с той же самой ординатой и лежащей левее на 170 пикселей. Следовательно, теперь команда будет принимать отрицательную абсциссу: l-170, 0 Относительная команда z завершает объект Path, соединяя отрезком последнюю точку с опорной.
    № Код Вид в браузере
    3.2.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes3.svg
     </desc>
     <path d="M15,15 H185 M185,15 V85 M185,85 H15 M15,85 V15"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
    Описание
    В начале задается опорная точка M 15,15. От нее проводится горизонтальная линия в точку 185, 15 при помощи команды H 185, причем в качестве ординаты берется соответствующее значение опорной точки. Далее устанавливается новая опорная точка M 185, 15 и от нее проводится вертикальная линия V85, теперь в качестве абсциссы берется соответствующее значение новой опорной точки. Снова добавляется опорная точка M 185,85, проводится горизонтальная линия H15. Наконец, добавляется последняя опорная точка M 15, 85 и вертикальная линия V15 соединяет ее с исходной точкой.
    № Код Вид в браузере
    3.2.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes4.svg
     </desc>
     <path d="M15,15 h170 M185,15 v70 M185,85 h-170 M15,85 v-70"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
    Описание
    При использовании относительных команд каждая добавляемая опорная точка становится началом отсчета. В этом примере четыре пары "опорная точка – относительная команда": 1) M15,15 h170 2) M185,15 v70 3) M185,85 h-170 4) M15,85 v-70
    № Код Вид в браузере
    3.2.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes5.svg
     </desc>
     <path d="M100,10  L105.8,27.2 123.8,27.2 109.4,38
                     114.6,55.2 100,45 85.4,55.2 90.6,38
                     76.2,27.2 94.2,27.2"
style="fill:red"/>
</svg>
    Описание
    В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Исходные координаты взяты из примера polygon5.svg (см. Лекцию 2).
    № Код Вид в браузере
    3.2.6 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes6.svg
     </desc>
     <path d="M100,10  L121.6,22.5  121.6,47.5
              100,60  78.4,47.52  78.4,22.5 Z
"
style="fill:dodgerblue; stroke:blue; stroke-width:5"/>
</svg>
    Описание
    В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Для завершения фигуры добавляется команда Z (сравните вид фигуры без этой команды). Исходные координаты взяты из примера polygon6.svg (см. Лекцию 2).

    Кривые Безье третьего порядка (Cubic Bezier Curve)

    Кривые БезьеОтличные анимации, отражающие процесс построения кривых Безье, вы можете увидеть здесь: http://ru.wikipedia.org/wiki/Кривая_Безье , представляющие мощное средство рисования, знакомы пользователям таких графических пакетов, как Adobe Illustrator, Macromedia Freehand или Corel Draw. Для рисования кубических кривых Безье (кривых третьего порядка) в SVG графике поддерживается следующие команды (табл. 3.3):

    Команды для рисования кривых Безье
    КомандаОписаниеПараметры
    C / c ( curveTo ) Рисование кубической кривой Безье от текущей точки (mx, my) до заданной (x,y) с начальной контрольной точкой (x1, y1) и конечной (x2, y2) (рис. 3.2) x1, y1 x2, y2 x, y
    S / s ( shorthand/smooth CurveTo ) Рисование кубической кривой Безье от текущей точки (mx, my) до заданной (x,y). Начальная контрольная точка представляет собой отражение конечной контрольной точки предыдущей команды. Для конечной контрольной точки задаются координаты (x2, y2) x2, y2 x, y
    (рис 3.2) Рисование кубической кривой Безье(рис 3.4) Рисование кубической кривой Безье
    Примеры кривых Безье
    № Код Вид в браузере
    3.4.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve1.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C25,15 175,15 175,75" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="15" x2="25" y2="75"
      stroke-width="3" stroke="green"/>
<line x1="175" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="25" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    В начале задается опорная точка M 25, 75. Далее указываются две контрольные точки 25, 15 и 175, 15, а затем конечная точка 175,75. Вспомогательные фигуры добавлены для отображения построения кривой. Закомментируйте их ( или удалите) для просмотра самой кривой в чистом виде.
    № Код Вид в браузере
    3.4.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve2.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 c0,-60 150,-60 150,0" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="175" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="25" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    В начале задается опорная точка M 25, 75. Далее указываются две контрольные точки 0,-60 и 150,-60, координаты которых отсчитываются относительно опорной. Затем добавляется конечная точка с координатами 150,0 также относительно опорной.
    № Код Вид в браузере
    3.4.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve3.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C5,15 195,15 175,75" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="5" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="195" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="5" cy="15"  r="4" fill="red"/>
<circle cx="195" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Более вогнутая кривая по сравнению с примером CubicCurve1.svg. Используются абсолютные координаты (см. рис. 3.3)
    № Код Описание
    3.4.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve4.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 c-20,-60 170,-60 150,0" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="5" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="195" y1="15" x2="175" y2="75" 
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="5" cy="15"  r="4" fill="red"/>
<circle cx="195" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    		 Точно такой же результат получается при использовании относительных координат. (см. рис. 3.3).
    Вид в браузере
    (рис 3.3) Абсолютные и относительные координаты для примеров CubicCurve3.svg и CubicCurve4.svg
    № Код Вид в браузере
    3.4.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve5.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C40,15 160,15 175,75" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="40" y2="15" 
      stroke-width="3" stroke="green"/>
<line x1="160" y1="15" x2="175" y2="75" 
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="40" cy="15"  r="4" fill="red"/>
<circle cx="160" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Более выпуклая кривая по сравнению с примером CubicCurve1.svg. Используются абсолютные координаты.
    № Код Вид в браузере
    3.4.6 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve6.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 c15,-60 135,-60 150,0" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="40" y2="15" 
      stroke-width="3" stroke="green"/>
<line x1="160" y1="15" x2="175" y2="75" 
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="40" cy="15"  r="4" fill="red"/>
<circle cx="160" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Точно такой же результат получается при использовании относительных координат.
    № Код Вид в браузере
    3.4.7 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="180"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve7.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C40,15 160,135 175,75"
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="40" y2="15"
      stroke-width="3" stroke="green"/>
<line x1="160" y1="135" x2="175" y2="75" 
      stroke-width="3" stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="40" cy="15"  r="4" fill="red"/>
<circle cx="160" cy="135"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Кривая с параллельными отрезками, соединяющими опорные и контрольные точки.
    № Код Описание
    3.4.8 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve8.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 C25,15 175,15 175,75 S 325,135 325,75" 
           style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="175" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<line x1="325" y1="75" x2="325" y2="135"
      stroke-width="3" stroke="blue"/>
<line x1="175" y1="75" x2="175" y2="135"
      stroke-width="3" stroke="green" stroke-dasharray="5"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="175" cy="135"  r="4" fill="red"/>
<circle cx="25" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
<circle cx="325" cy="135"  r="4" fill="magenta"/>
</svg>
    		 После завершения кривой Безье добавляется команда S 325,135 325,75 которая использует в качестве первой контрольной точки отражение последней точки 175,15 предыдущей команды (см. рис. 3.4)
    Вид в браузере.
    (рис 3.4) Команда S 325,135 325,75
    № Код Описание
    3.4.9 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример CubicCurve9.svg
     </desc>
     <!--Объект Path-->
          <path d="M25,75 c0,-60 150,-60 150,0 s 150,60 150,0" 
                style="fill:none; stroke:green;stroke-width:3"/>
<!--Вспомогательные фигуры-->
<line x1="25" y1="15" x2="25" y2="75" 
      stroke-width="3" stroke="green"/>
<line x1="175" y1="15" x2="175" y2="75"
      stroke-width="3" stroke="green"/>
<line x1="325" y1="75" x2="325" y2="135"
      stroke-width="3" stroke="blue"/>
<line x1="175" y1="75" x2="175" y2="135"
      stroke-width="3" stroke="green" stroke-dasharray="5"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="175" cy="135"  r="4" fill="red"/>
<circle cx="25" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="15"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
<circle cx="325" cy="135"  r="4" fill="magenta"/>
</svg>
    		 Здесь получается та же самая фигура, что и в примере CubicCurve8.svg, но с использованием относительных координат. Для команды c0,-60 150,-60 150,0 началом отсчета является первая опорная точка, для команды s 150,60 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой. (рис. 3.5)
    Вид в браузере.
    (рис 3.5) Абсолютные и относительные координаты для примеров CubicCurve8.svg и CubicCurve9.svg

    Кривые Безье второго порядка (Quadratic Bezier Curves)

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

    Команды для рисования кривых Безье четвертого порядка
    КомандаОписаниеПараметры
    Q / q ( quadratic Bezier curveTo ) Рисование квадратичной кривой Безье от текущей точки (mx, my) до заданной (x,y) с контрольной точкой (x1, y1) (рис. 3.6). x1, y1 x,y
    T / t ( shorthand/ smooth quadratic Bezier CurveTo ) Рисование кубической кривой Безье от текущей точки до заданной (x,y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды. x,y
    (рис 3.6) Рисование квадратичной кривой Безье

    Наличие одной контрольной точки позволяет гораздо быстрее получать нужные кривые при написании кода.

    Примеры кривых Безье четвертого порядка
    № Код Вид в браузере
    3.6.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve1.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 Q100,25 175,75" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Простейшая квадратичная кривая Безье. Контрольная точка равноудалена от опорных.
    № Код Вид в браузере
    3.6.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve2.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 q75,-50 150,0" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
</svg>
    Описание
    Точно такая же кривая, как в примере QuadraticCurve1.svg, но используется относительная команда.
    № Код Вид в браузере
    3.6.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="350" height="150"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve3.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 Q100,25 175,75 T 325,75" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="250" y2="125"
      stroke-width="3"  stroke="green" stroke-dasharray="5"/>
<line x1="250" y1="125" x2="325" y2="75"
      stroke-width="3"  stroke="blue"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="250" cy="125"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
</svg>
    Описание
    После завершения квадратичной кривой добавляется команда T 325,75, которая использует в качестве своей контрольной точки отражение контрольной точки 100, 25 предыдущей команды (см. рис. 3.7)
    № Код Описание
    3.6.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="350" height="150"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve4.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 q75,-50 150,0 t 150,0" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="250" y2="125"
      stroke-width="3"  stroke="green" stroke-dasharray="5"/>
<line x1="250" y1="125" x2="325" y2="75"
      stroke-width="3"  stroke="blue"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="250" cy="125"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
</svg>
    		 Здесь получается та же самая фигура, что и в примере QuadraticCurve3.svg, но с использованием относительных координат. Для команды q75,-50 150,0 началом отсчета является первая опорная точка, для команды t 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой. (рис. 3.7)
    Вид в браузере.
    (рис 3.7) Абсолютные и относительные координаты для примеров QuadraticCurve3.svg и QuadraticCurve4svg
    № Код Описание
    3.6.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="700" height="150"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример QuadraticCurve5.svg
     </desc>
     <!--Объект Path-->
     <path d="M25,75 Q100,25 175,75 T 325,75 T475, 75 T 625,75" 
     style="fill:none; stroke:green;stroke-width:3"/>

<!--Вспомогательные фигуры-->
<line x1="25" y1="75" x2="100" y2="25"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="175" y2="75"
      stroke-width="3"  stroke="green"/>
<line x1="100" y1="25" x2="250" y2="125"
      stroke-width="3"  stroke="green" stroke-dasharray="5"/>
<line x1="250" y1="125" x2="325" y2="75"
      stroke-width="3"  stroke="blue"/>
<circle cx="25" cy="75"  r="4" fill="red"/>
<circle cx="100" cy="25"  r="4" fill="red"/>
<circle cx="175" cy="75"  r="4" fill="red"/>
<circle cx="250" cy="125"  r="4" fill="red"/>
<circle cx="325" cy="75"  r="4" fill="magenta"/>
<circle cx="475" cy="75"  r="4" fill="magenta"/>
<circle cx="625" cy="75"  r="4" fill="magenta"/>
</svg>
    		 При рисовании кривых с повторяющимися фрагментами удобно использовать команду T для упрощения кода. В данном примере все команды используют первую опорную точку M 25, 75
    Вид в браузере

    Эллиптические кривые (Elliptical Curves)

    Эллиптические кривые представляют собой фрагменты эллипсов (дуги). Для их создания используются команды, приведенные в табл. 3.7.

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

    В отличие от рисования кривых Безье команда эллиптической кривой содержит достаточно большое число параметров. Параметры mx, my, x, y, rx, ry наглядно видны, более сложно понять x-axis-rotation, large-arc-flag, sweep-flag. Рассмотрим их на примерах табл. 3.8

    Примеры эллиптических кривых.
    № Код Вид в браузере
    3.8.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve1.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 A50,25 0 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Рисование кривой, которая представляет собой 3/4 эллипса. Значения пары large-arc-flag, sweep-flag: 1,0. Для формирования представления о размерах самого SVG документа добавлена рамка.
    № Код Вид в браузере
    3.8.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve2.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 a50,25 0 1,0 50,25"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Здесь получается та же самая фигура, что и в примере EllipticalCurve1.svg, но с использованием относительных координат.
    № Код Вид в браузере
    3.8.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve3.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 A50,25 0 0,1 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Значения параметров, описывающих кривую, совпадают в точности со значениями примера EllipticalCurve1.svg за исключением пары large-arc-flag, sweep-flag, которая здесь равна 0,1
    № Код Вид в браузере
    3.8.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve4.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 A50,25 0 0,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Значения параметров, описывающих кривую, совпадают в точности со значениями примера EllipticalCurve1.svg за исключением пары large-arc-flag, sweep-flag, которая здесь равна 0,0
    № Код Вид в браузере
    3.8.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve5.svg
     </desc>
<!--Объект Path-->
<path d="M100,100 A50,25 0 1,1 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
     stroke="blue" stroke-width="2" fill="none"></rect>
</svg>
    Описание
    Значения параметров, описывающих кривую, совпадают в точности со значениями примера EllipticalCurve1.svg за исключением пары large-arc-flag, sweep-flag, которая здесь равна 1,1

    Рассмотренные примеры 3.8.1 - 3.8.5 позволяют сделать вывод: пара значений large-arc-flag, sweep-flag отвечают за то, какая часть фигуры, формируемая пересечением двух эллипсов, будет видна (рис. 3.9):

    (рис 3.9) Все возможные значения пары large-arc-flag, sweep-flag и формируемая ими кривая. (ArcForm.svg)

    Рассмотрим теперь последний "неявный" параметр x-axis-rotation (табл. 3.9)

    Примеры эллиптических кривых. Параметр x-axis-rotation.
    № Код Вид в браузере
    3.9.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve6.svg
     </desc>
<!--Поворот объекта Path на 10 градусов-->
<path d="M100,100 A50,25 10 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 20 градусов-->
<path d="M100,100 A50,25 20 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 30 градусов-->
<path d="M100,100 A50,25 30 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 40 градусов-->
<path d="M100,100 A50,25 40 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 50 градусов-->
<path d="M100,100 A50,25 50 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Исходный объект Path-->
<path d="M100,100 A50,25 0 1,0 150,125"
stroke-width="3"  stroke="black"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
      
     stroke="blue" stroke-width="2" fill="none">
</rect>
</svg>
    Описание
    В этом примере расположено несколько кривых, отличающихся только параметром x-axis-rotation, который принимает значения 10, 20, 30, 40 и 50 градусов. Заметен поворот всей фигуры, как единого целого, относительно горизонтальной оси против часовой стрелки. При этом сохраняется привязка к опорным точкам.

    Экспорт графики и объект Path

    Мы закончили рассмотрение объекта Path. Мощные графические пакеты, такие как Corel Draw или Adobe Illustrator содержат развитые средства для работы с кривыми. При экспорте в формат SVG большая часть получаемого кода и представляет собой описание именно этого элемента (рис. 3.1):

    (рис 3.10) Преобразование рисунка в формат SVG в программе Corel Draw (CorelDraw_Plane.svg)

    При программном создании сложной кривой бывает трудно расставить контрольные точки. Можно было бы нарисовать кривую в Corel Draw, а затем экспортировать в SVG, но проблема заключается в том, что получаемые таким образом координаты содержат неудобные, дробные значения. Типичный фрагмент кода выглядит так (CorelDraw_Plane.svg):

    <clipPath id="id0">
  <path d="M0.00772 27.9351c0,-3.0984 0,-6.1968 0,-9.2952 0,-3.0984 0,-6.1968 0,-9.2952 0,-3.0984 
  0,-6.1968 0,-9.2952 1.80917,0 3.61834,0 5.42751,0 1.80917,0 3.61834,0 5.4275,0 1.80917,0 
  3.61834,0 5.42751,0 1.80916,0 3.61833,0 5.4275,0 0,3.0984 0,6.1968 0,9.2952 0,3.0984 
  0,6.1968 0,9.2952 0,3.0984 0,6.1968 0,9.2952 -1.80917,0 -3.61834,0 -5.4275,0 -1.80917,0 
  -3.61834,0 -5.42751,0 -1.80916,0 -3.61833,0 -5.4275,0 -1.80917,0 -3.61834,0 -5.42751,0z"/>
</clipPath>

    Программа Sketsa SVG Graphics Editor, с которой мы уже сталкивались в Лекции 1, позволяет более корректно определять координаты создаваемых кривых (рис. 3.11)

    (рис 3.11) Рисование кривой Безье в Sketsa SVG Graphics Editor

    Нарисованные при помощи инструментов кривые могут быть затем отредактированы непосредственно в режиме кода или вообще в другом внешнем редакторе.

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^