Элемент «path» самый гибкий элемент из всех элементов SVG. С его помощью можно нарисовать любой простой элемент, вроде круга, прямоугольника, эллипса и т.д. Хотя предназначен этот элемент для рисования сложных кривых.
Элемент «path» имеет два атрибута:
Атрибут 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) устанавливает новую текущую точку. Можно представить себе, что при указании «moveto» автор поднимает карандаш и перемещает его на новое место. Сегмент данных d (если он один) всегда должен начинаться с команды «moveto». Если «moveto» не первая команда, то создается новый подэлемент элемента «path» (возникает разрыв между первым подэлементом начинающимся с «moveto» и следующим).
Команда «moveto» не имеет параметров.
Команда ’closepath’ (Z или z) завершает текущий подэлемент элемента «path» и автоматически создает прямую линию, соединяющую текущую точку с точкой начала подэлемента элемента «path». Если «closepath» следует сразу после «moveto», то «moveto» становится точкой начала для следующего подэлемента. Если «closepath» следует за какой-то другой командой, то точкой начала нового подэлемента становится точка начала текущего подэлемента.
Команда «closepath» не имеет параметров.
Команда «lineto» рисует линию из текущей точки в новую точку.
Всего три группы команд для рисования кривых:
Ниже представлен простой пример использования
<?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.
Нижеследующий пример демонстрирует использование квадратичной кривой Безье.
<?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>
Пример.
<?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 рисует сегмент эллипса, который имеет некоторые ограничения
В большинстве случаев существует четыре различные дуги (два эллипса каждый состоит из двух дуг), которые соответствуют этим ограничениям. large-arc-flag и sweep-flag указывают, какая из дуг будет нарисована.
Пример, в котором знаки вопроса ?,? заменяются последовательно на “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"/>
We decided to use an Azure App Configuration to store configs of backend. App Configuration…
I have encountered an issue with az acr login --name <acr_name> command. It hanged and…
I have tried to learn terraform from scratch and found pretty simple tutorial for beginners.…
При внедрении Swagger в проекте .Net Core Web API потребовалось скрыть одно поле из примера,…
Около года назад я решил попробовать заработать на фондовой бирже, покупая и продавая акции. Изучая…
Во время установки .NET Framework столкнулся с ошибкой Installation failed with error code: (0x00000490), "Element…