files/ru/web/svg/tutorial/basic_shapes/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

---
title: Основные Фигуры
slug: Web/SVG/Tutorial/Basic_Shapes
tags:
  - SVG
  - SVG:Руководство
translation_of: Web/SVG/Tutorial/Basic_Shapes
original_slug: Web/SVG/Tutorial/Основные_Фигуры
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>

<p>Существует несколько основных фигур, используемых в большинстве рисунков SVG. Назначение этих фигур вполне очевидно из их имён. Мы привели здесь некоторые атрибуты, определяющие положение и размер, но спецификация элемента, вероятно, содержит более точное и полное описание, вместе с другими свойствами, не описанными здесь. Однако, так как они используются в большинстве документов SVG, важно иметь некоторое представление о них.</p>

<h2 id="Basic_shapes" name="Basic_shapes">Основные формы</h2>

<p>Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:</p>

<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p>

<pre class="brush:xml">&lt;?xml version="1.0" standalone="no"?&gt;
&lt;svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
  &lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;

  &lt;circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/&gt;
  &lt;ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/&gt;

  &lt;line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/&gt;
  &lt;polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/&gt;

  &lt;polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/&gt;

  &lt;path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/&gt;
&lt;/svg&gt;</pre>

<div class="note"><strong>Замечание:</strong> Атрибуты <code>stroke</code>, <code>stroke-width</code> и <code>fill</code> описываются в руководстве далее.</div>

<h3 id="Rectangles" name="Rectangles">Прямоугольники</h3>

<p>Элемент <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect">rect</a> делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.</p>

<pre class="brush:xml">&lt;rect x="10" y="10" width="30" height="30"/&gt;
&lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30"/&gt;</pre>

<dl>
 <dt>x</dt>
 <dd>Положение x верхнего левого угла прямоугольника.</dd>
 <dt>y</dt>
 <dd>Положение y верхнего левого угла прямоугольника.</dd>
 <dt>width</dt>
 <dd>Ширина прямоугольника</dd>
 <dt>height</dt>
 <dd>Высота прямоугольника</dd>
 <dt>rx</dt>
 <dd>Радиус x углов прямоугольника</dd>
 <dt>ry</dt>
 <dd>Радиус y углов прямоугольника</dd>
</dl>

<h3 id="Circle" name="Circle">Окружность</h3>

<p>Как вы могли предположить, элемент <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle">circle</a> рисует окружность на экране. Существует 3 атрибута для описания этого элемента.</p>

<pre class="brush:xml;gutter:false;">&lt;circle cx="25" cy="75" r="20"/&gt;</pre>

<dl>
 <dt>r</dt>
 <dd>Радиус окружности.</dd>
 <dt>cx</dt>
 <dd>Положение x центра окружности.</dd>
 <dt>cy</dt>
 <dd>Положение y центра окружности.</dd>
</dl>

<h3 id="Ellipse" name="Ellipse">Эллипс</h3>

<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a> - это наиболее общая форма элемента окружность, в котором можно масштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.</p>

<pre class="brush:xml;gutter:false;">&lt;ellipse cx="75" cy="75" rx="20" ry="5"/&gt;</pre>

<dl>
 <dt>rx</dt>
 <dd>Радиус x эллипса.</dd>
 <dt>ry</dt>
 <dd>Радиус y эллипса.</dd>
 <dt>cx</dt>
 <dd>Положение x центра эллипса.</dd>
 <dt>cy</dt>
 <dd>Положение y центра эллипса.</dd>
</dl>

<h3 id="Line" name="Line">Линия</h3>

<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a> изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечную точки линии.</p>

<pre class="brush:xml;gutter:false;">&lt;line x1="10" x2="50" y1="110" y2="150"/&gt;</pre>

<dl>
 <dt>x1</dt>
 <dd>Положение x точки 1.</dd>
 <dt>y1</dt>
 <dd>Положение y точки 1.</dd>
 <dt>x2</dt>
 <dd>Положение x точки 2.</dd>
 <dt>y2</dt>
 <dd>Положение y точки 2.</dd>
</dl>

<h3 id="Polyline" name="Polyline">Ломаная линия</h3>

<p>Элемент <a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">polyline</a> воспроизводит группу соединённых прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:</p>

<pre class="brush:xml;gutter:false;">&lt;polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/&gt;</pre>

<dl>
 <dt>точки</dt>
 <dd>Список точек, каждая разделённая пробелом, запятой,  <abbr title="Конец строки (англ. End of line)">EOL</abbr>, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: "0 0, 1 1, 2 2".</dd>
</dl>

<h3 id="Polygon" name="Polygon">Многоугольник</h3>

<p>Элемент <a href="/en-US/Web/SVG/Element/polygon" title="en-US/Web/SVG/Element/polygon">polygon</a> очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента <code>&lt;rect/&gt;</code> в случаях, когда необходимо большая гибкость.</p>

<pre class="brush:xml;gutter:false;">&lt;polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/&gt;</pre>

<dl>
 <dt>точки</dt>
 <dd>Список точек, каждая разделённая пробелом, запятой,  <abbr title="Конец строки (англ. End of line)">EOL</abbr>, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: "0 0, 1 1, 2 2". Полигон замыкается финальной прямой линией от (2,2) до (0,0).</dd>
</dl>

<h3 id="Path" name="Path">Путь</h3>

<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a>, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закруглёнными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">в следующей секции</a> этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.</p>

<pre class="brush:xml;gutter:false;">&lt;path d="M 20 230 Q 40 205, 50 230 T 90230"/&gt;</pre>

<dl>
 <dt>d</dt>
 <dd>Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Пути</a>.</dd>
</dl>

<div>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</div>