initial commit

1 files changed, 144 insertions, 0 deletions

diff --git a/files/ru/web/svg/tutorial/основные_фигуры/index.html b/files/ru/web/svg/tutorial/основные_фигуры/index.html
new file mode 100644
index 0000000000..e95fd31f68
--- /dev/null
+++ b/files/ru/web/svg/tutorial/основные_фигуры/index.html
@@ -0,0 +1,144 @@
+---
+title: Основные Фигуры
+slug: Web/SVG/Tutorial/Основные_Фигуры
+tags:
+  - SVG
+  - 'SVG:Руководство'
+translation_of: Web/SVG/Tutorial/Basic_Shapes
+---
+<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>