From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../index.html" | 144 +++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 "files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" (limited to 'files/ru/web/svg/tutorial/основные_фигуры') diff --git "a/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" "b/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" new file mode 100644 index 0000000000..e95fd31f68 --- /dev/null +++ "b/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" @@ -0,0 +1,144 @@ +--- +title: Основные Фигуры +slug: Web/SVG/Tutorial/Основные_Фигуры +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

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

+ +

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

+ +

Основные формы

+ +

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

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <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"/>
+
+  <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"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+ +
Замечание: Атрибуты stroke, stroke-width и fill описываются в рукодстве далее.
+ +

Прямоугольники

+ +

Элемент rect делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.

+ +
<rect x="10" y="10" width="30" height="30"/>
+<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+ +
+
x
+
Положение x верхнего левого угла прямоугольника.
+
y
+
Положение y верхнего левого угла прямоугольника.
+
width
+
Ширина прямоугольника
+
height
+
Высота прямоугольника
+
rx
+
Радиус x углов прямоугольника
+
ry
+
Радиус y углов прямоугольника
+
+ +

Окружность

+ +

Как вы могли предположить, элемент circle рисует окружность на экране. Существует 3 атрибута для описания этого элемента.

+ +
<circle cx="25" cy="75" r="20"/>
+ +
+
r
+
Радиус окружности.
+
cx
+
Положение x центра окружности.
+
cy
+
Положение y центра окружности.
+
+ +

Эллипс

+ +

Ellipse - это наиболее общая форма элемента окружность, в котором можно маштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.

+ +
<ellipse cx="75" cy="75" rx="20" ry="5"/>
+ +
+
rx
+
Радиус x эллипса.
+
ry
+
Радиус y эллипса.
+
cx
+
Положение x центра эллипса.
+
cy
+
Положение y центра эллипса.
+
+ +

Линия

+ +

Line изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечне точки линии.

+ +
<line x1="10" x2="50" y1="110" y2="150"/>
+ +
+
x1
+
Положение x точки 1.
+
y1
+
Положение y точки 1.
+
x2
+
Положение x точки 2.
+
y2
+
Положение y точки 2.
+
+ +

Ломаная линия

+ +

Элемент polyline воспроизводит группу соединенных прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:

+ +
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+ +
+
точки
+
Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: "0 0, 1 1, 2 2".
+
+ +

Многоугольник

+ +

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

+ +
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+ +
+
точки
+
Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: "0 0, 1 1, 2 2". Полигон замыкается финальной прямой линией от (2,2) до (0,0).
+
+ +

Путь

+ +

Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

+ +
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+ +
+
d
+
Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.
+
+ +
{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
-- cgit v1.2.3-54-g00ecf