Основные фигуры

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

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

Succession of eight different shapes and drawings. At the top left, a black outline square follow by a black rounded outline square. Below at the left, a red outline circle follow by a red outline ellipse. Below at the left a yellow line, follow by a yellow zigzag. Below the yellow lines, a green outline star and at the end of the image a blue wavy line.

Код для генерации этого изображения примерно такой:

xml

<?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" 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> рисует прямоугольник на экране. Есть шесть основных атрибутов, которые управляют положением и формой прямоугольников на экране. У прямоугольника справа установлены параметры rx и ry, придающие ему скругленные углы. Если они не установлены, по умолчанию используется 0.

xml

<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> рисует окружность на экране. Для определения формы и размера элемента требуется три основных параметра.

xml

<circle cx="25" cy="75" r="20"/>

r: Радиус окружности.
cx: Положение x центра окружности.
cy: Положение y центра окружности.

Эллипс

Эллипс <ellipse> — более общий вид элемента <circle>, где вы можете масштабировать радиус по оси x и y (обычно называемые большой и малой полуосями в математике) отдельно.

xml

<ellipse cx="75" cy="75" rx="20" ry="5"/>

rx: Радиус эллипса по оси x.
ry: Радиус эллипса по оси y.
cx: Положение x центра эллипса.
cy: Положение y центра эллипса.

Линия

Элемент <line> принимает координаты двух точек в качестве параметров и рисует прямую линию между ними.

xml

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>

x1: Положение x первой точки.
y1: Положение y первой точки.
x2: Положение x второй точки.
y2: Положение y второй точки.

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

Ломаная линия <polyline> представляет собой набор соединённых прямых линий. Поскольку список точек может быть довольно длинным, все точки включены в один атрибут:

xml

<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>

points: Список точек. Каждое число должно быть разделено пробелом, запятой, символом конца строки или символом новой строки с допускаемым дополнительным пробелом. Каждая точка должна содержать два числа: координату x и координату y. Таким образом, список (0,0), (1,1), и (2,2) может быть записан как 0, 0 1, 1 2, 2.

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

Многоугольник <polygon> похож на ломаную линию <polyline> тем, что он состоит из отрезков прямых линий, соединяющих список точек. Однако для многоугольников путь автоматически соединяет последнюю точку с первой, создавая замкнутую фигуру.

Примечание: Прямоугольник является типом многоугольника, поэтому многоугольник может использоваться для создания элемента <rect/> без скругленных углов.

xml

<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>

points: Список точек, каждое число разделено пробелом, запятой, символом конца строки или символом новой строки с допускаемым дополнительным пробелом. Каждая точка должна содержать два числа: координату x и координату y. Таким образом, список (0,0), (1,1), и (2,2) может быть записан как 0, 0 1, 1 2, 2. Рисование затем закрывает путь, поэтому последняя прямая линия будет нарисована от (2,2) до (0,0).

Путь

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

По этой причине следующий раздел этого руководства будет посвящён путям. Но на данный момент обратите внимание, что существует единственный параметр, используемый для управления его формой.

xml

<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

d: Список точек и другой информации о том, как нарисовать путь. См. раздел Пути для получения дополнительной информации.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes