Svg прямоугольник с закругленными углами: Описание и примеры стандартных функций SVG

Описание и примеры стандартных функций SVG

Доминирующей причиной появления этого блога стало незаслуженное забвение на целых десять лет языка разметки масштабируемой векторной графики – SVG (Scalable Vector Graphics), входящего в подмножество расширяемого языка разметки XML.
Стандарт SVG 1.0 был принят в качестве спецификации Консорциумом Всемирной паутины (W3C) в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г.
Сейчас ведутся работы по созданию стандарта SVG 2.0

Основные преимущества формата SVG.

Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК.
Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться.
SVG – это двухмерная графика и тем не менее это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Incscape , Adobe illustrator, CorelDRAW

Бесконечное полотно документа svg.

Итак, как происходит формирование векторного изображения.
Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра: viewport – системная область просмотра и viewBox – пользовательская область просмотра, положение которой относительно начала системных координат viewport, может задаваться собственной, пользовательской системой координат. Другими словами окно просмотра viewBox, может быть перемещёно в любое место документа SVG, при этом берется фрагмент изображения под ним, который после процесса согласования между viewBox и viewport, возвращается обратно в системную область просмотра viewport, которую видит пользователь. Используя это свойство можно организовать вертикальную или горизонтальную прокрутку изображения, меняя параметры координат viewBox.

При уменьшении размера пользовательского окна просмотра viewbox можно пропорционально увеличивать фрагмент изображения в системной области просмотра или уменьшать его при увеличении размера viewbox.
Таким образом реализуется эффект лупы. Более подробно эти процессы разобраны в статье: Трансформация изображений SVG при изменении параметров Viewbox.

Взаимодействие SVG, XML с HTML, CSS, Jscript

В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна.
Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей.
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT).
Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например визуализировать графики, круговые диаграммы, гистограммы и т.д.

Анимация и интерактивность SVG.

Анимация в SVG осуществляется при помощи языка SMIL (Synchronized Multimedia Integration Language). Также поддерживаются скриптовые языки на основе спецификации ECMAScript — это встраиваемый расширяемый язык программирования.
То есть всё находится в одном месте, внутри документа SVG, поэтому нет необходимости для подключения внешних библиотек.
На каждую отдельную фигуру или на целое изображение можно установить обработчик событий (клик, наведение мышки, нажатие клавиши и т. д), таким образом, пользователь может управлять рисунком. Наведите курсор мышки на кнопку“Start” на примере слева.
По событию mouseover на этой кнопке начнется анимация по команде begin=”startButton.mouseover” – движение цветных шариков по криволинейному пути. Закончится анимация либо через заданные в коде 16 секунд, либо в любой момент по наведению курсора мышки на цветные радиокнопки “Stop”. При этом каждая радиокнопка управляет своим объектом совпадающим по цвету. На рисунке ниже анимация начинается и заканчивается при нажатии клавиши мышки на кнопки GO и STOP. В этом случае работает событие click. Команда на запуск анимации – begin=”gO.click” и соответственно остановка – end=”stop.click”
Следующий пример анимации – плавная отрисовка картинки с нуля до полного изображения.

Уже встроенные в SVG языки программирования позволяют реализовать довольно сложные сценарии анимации. Но, в дополнение к этому есть еще более мощные средства для реализации интерактивности графики и ее анимации – это внешние библиотеки сторонних разработчиков: D3. js, BonsaiJS, Svg.js, Snapsvg.js

Еще примеры анимации ⇛

Недостатки SVG формата

С увеличением количества мелких деталей в изображении, быстрее растёт размер файла SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже имеет проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
Трудность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
В настоящее время SVG формат применяется в Интернете сравнительно мало, из-за недостаточной кроссбраузерности. Лучше всего обстоят дела у Mozilla Firefox со встроенным просмотрщиком SVG, так как ее разработчики находятся в рабочей группе Консорциума Всемирной паутины (W3C) по разработке и внедрению стандарта SVG. Хуже всего дела по поддержке формата SVG у Microsoft, которая покинула группу 2003 г. Для Internet Explorer – необходим Adobe SVG Viewer (ASV). С 9 версии IE частично поддерживает функции SVG.
Браузеры Apple Safari, Google Chrome намного лучше поддерживают SVG, но не полностью, так как SVG – это большая спецификация (вдвое больше HTML 4.01), именно поэтому разработчики браузеров внедряют функции постепенно, от версии к версии. Но абсолютно все разработчики современных браузеров заявляют, что за форматом SVG будущее в области графики вебдизайна.

UPD. Добавлен новый раздел онлайн генераторы SVG кода path.
следующая: Структура SVG документа ⇛

Основные Фигуры — SVG | MDN

« Предыдущая статья
Следующая статья »

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

Однако, так как они используются в большинстве документов SVG, важно иметь некоторое представление о них.

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

<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" 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"/>
<rect x="60" y="10" rx="10" ry="10"/>

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: Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.

« Предыдущая статья
Следующая статья »

Last modified: 7 нояб. 2022 г., by MDN contributors

– SVG&колония; Масштабируемая векторная графика

Элемент представляет собой базовую форму SVG, которая рисует прямоугольники, определяемые их положением, шириной и высотой. У прямоугольников могут быть закруглены углы.

 html,
тело,
свг {
  высота: 100%;
}

х

Координата x прямоугольника.

Тип значения : <длина> | <процент> ; Значение по умолчанию : 0 ; Анимация : да

г

Координата Y прямоугольника. Тип значения : <длина> | <процент> ; Значение по умолчанию : 0 ; Анимация : да

ширина

Ширина прямоугольника. Тип значения : авто | <длина> | <процент> ; Значение по умолчанию : авто ; Анимация : да

высота

Высота прямоугольника. Тип значения : авто | <длина>

| <процент> ; Значение по умолчанию : авто ; Анимация : да

приемник

Горизонтальный угловой радиус прямоугольника. По умолчанию или , если он указан. Тип значения : авто | <длина> | <процент> ; Значение по умолчанию : авто ; Анимация : да

рый

Вертикальный угловой радиус прямоугольника. По умолчанию rx , если он указан. Тип значения : авто | <длина> | <процент> ; Значение по умолчанию : авто ; Анимация : да

длина пути

Общая длина периметра прямоугольника в пользовательских единицах. Тип значения : <число> ; Значение по умолчанию : нет ; Анимация : да

ПРИМЕЧАНИЕ: , начиная с SVG2, x , Y , Ширина , Высота , RX и RY — Геометрические свойства , что означает, что эти атрибуты также могут использоваться как CSS. этот элемент.

Глобальные атрибуты

Основные атрибуты: В частности: id , tabindex
Атрибуты стиля: класс , стиль
Атрибуты условной обработки: В частности: requiredExtensions , systemLanguage
Атрибуты событий: Глобальные атрибуты событий, Графические атрибуты событий
Атрибуты презентации: наиболее примечательно: Clip-Path , -процесс формирования , Color , Color-Interpolation , Цветовой Рендринг , CURSOR , Дисплей , заполните , . fill-rule , filter , mask , opacity , pointer-events , shape-rendering , штрих , штрих-dasharray0005, ход удара по удалению , Stroke-LineCap , Инсульт-линейка , Shuck-Miterlimit , -op-opbytiny , , ширина хода , Transform , Vector-эффект , Visibilitib
Атрибуты арии: aria-activedescendant , aria-atomic , aria-autocomplete , aria-busy , aria-checked , aria-colcount , Aria-Colindex , Aria-Colspan , Aria-Controls , Aria-Current , Aria-Describedby , Aria-Details , Di-Disabled , Aria-Details , Di-Disabled , 4, , , , , , , , , , . aria-errormessage , aria-expanded , aria-flowto , aria-grabbed , aria-haspopup , aria-hidden , aria-invalid , aria-keyshortcuts , aria -этикетка , Aria-labelledby , уровня ARIA , Aria-Live , , ария-модал , Aria-Multilin -Полдент , ARIA-Posinset , ARIA-Pressed , ARIA-Readonly , ARIA-релевантный , ARIA-Required , ARIA-ROLEDESCREPT , aria-rowspan , aria-selected , aria-setsize , aria-sort , aria-valuemax , aria-valuemin , aria-valuenow , aria-valuetext , role

Категории	Базовый элемент формы, Графический элемент, Элемент формы
Разрешенный контент	Любое количество следующих элементов в любом порядке: Элементы анимации Descriptive elements

Specification
Scalable Vector Graphics (SVG) 2 # RectElement

BCD tables only load in the browser

 with JavaScript enabled. Включите JavaScript для просмотра данных. Другие базовые формы SVG:  <круг>  ,  <эллипс>  ,  <линия>  ,   <многоугольник>   ,  <полилиния> 
  Последнее изменение:   13 сентября 2022 г.  , участниками MDN
 Basic Shapes — SVG Tiny 1.2 
 Basic Shapes — SVG Tiny 1.2 Содержимое 
 9.1 Введение
 9.2 Прямоугольный элемент
 9.3 Элемент «круг»
 9.4 Элемент «эллипс»
 9.5 Элемент «линия»
 9.6 Элемент «полилиния»
 9.7 Элемент «многоугольник» 9.7.1 Грамматика для спецификаций точек в элементах «polyline» и «polygon»
 9.1 Введение 
 SVG содержит следующий набор основных элементов формы:
 прямоугольников (включая необязательные закругленные углы), созданных с помощью элемента 'rect',
 кругов, созданных с помощью элемента 'circle',
 эллипсов, созданных с помощью элемента 'ellipse',
 прямых линий, созданных с помощью элемента «линия»,
 полилиний, созданных с помощью элемента 'polyline', и
 полигонов, созданных с помощью элемента 'polygon'.
 Математически эти элементы формы эквивалентны элементу «пути», который
 построить такую же форму. Основные формы можно обводить,
 и заполнено. Все доступные свойства
 для элементов «путь» также применяются к
 основные формы.
 9.2 Прямоугольник
 элемент 
 Элемент 'rect' определяет
 прямоугольник, выровненный по оси с текущей пользовательской координатой
 система. Скругленные прямоугольники могут быть получены путем установки
 соответствующие значения для атрибутов «rx» и «ry».
  Определения атрибутов: 
 x = "<координата>"
 Координата стороны прямоугольника по оси X
 который имеет меньшее значение координаты оси X в
 текущая пользовательская система координат.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 г = "<координата>"
 Координата стороны прямоугольника по оси Y
 который имеет меньшее значение координаты оси Y в
 текущая пользовательская система координат. Значение лакуны
 равен «0».
 Анимация:
 да.
 ширина = "<длина>"
 Ширина прямоугольника.
 Отрицательное значение не поддерживается.
 Нулевое значение отключает визуализацию элемента.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 высота = "<длина>"
 Высота прямоугольника.
 Отрицательное значение не поддерживается.
 Нулевое значение отключает визуализацию элемента.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 rx = "<длина>"
 Для прямоугольников со скругленными углами радиус по оси x
 эллипс используется для закругления углов
 прямоугольник.
 Отрицательное значение не поддерживается.
 См. примечания ниже о том, что происходит, если атрибут
 не определен.
 Анимация:
 да.
 ry = "<длина>"
 Для прямоугольников со скругленными углами радиус по оси Y
 эллипс используется для закругления углов
 прямоугольник.
 Отрицательное значение не поддерживается.
 См. примечания ниже о том, что происходит, если атрибут
 не определен.
 Анимация:
 да.
 фокусируемое = "истина" | "ложный" | "авто"
 Описание см. в определении атрибута.
 Анимация: да.
 Атрибуты навигации
 См. определение.
 Если для 'rx' указано правильное значение, но не для 'ry', тогда пользовательский агент должен обработать
 прямоугольный элемент с
 эффективное значение для 'ry' равно 'rx'. Если правильно указанное значение
 предоставляется для 'ry', но не для 'rx', тогда пользовательский агент должен обработать
 прямоугольный элемент с
 эффективное значение для 'rx' равно 'ry'. Если ни 'rx', ни 'ry' не имеют правильно указанного значения,
 тогда пользовательский агент должен обработать элемент 'rect' так, как если бы
 было указано округление, в результате чего углы были прямыми. Если «rx» больше половины
 ширину прямоугольника, то пользовательский агент должен обработать элемент 'rect' с
 эффективное значение для 'rx' как половина ширины
 прямоугольник. Если ry больше половины
 высота прямоугольника, то пользовательский агент должен обработать элемент 'rect' с
 эффективное значение для 'ry' как половина высоты
 прямоугольник.
 Прямоугольный элемент со скругленными углами
 углы должны быть отрисованы таким образом, чтобы
 тот же результат, как если бы следующее
 Вместо этого были указаны контуры
 (примечание: все значения координат и длины сначала преобразуются
 в координаты пользовательского пространства в единицах):
 Выполнение операции абсолютного перемещения к местоположению (  x+rx  ,  y  ), где  x  и  y  — значения
 'x' элемента 'rect'
 и атрибут 'y' преобразуется в пользовательское пространство, и  rx  и  ry  — действующие значения
 Атрибуты «rx» и «ry» преобразованы в пользовательское пространство.
 Выполнить операцию абсолютной горизонтальной линии к местоположению (  x+width-rx  ,  y  ), где  ширина  — это атрибут «ширина» прямоугольного элемента, преобразованный в пользовательское пространство.
 Выполнить операцию абсолютной эллиптической дуги для координат (  x+width  ,  y+ry  ), где действующие значения атрибутов 'rx' и 'ry' на
 Прямоугольный элемент, преобразованный в пользовательское пространство, используется в качестве большой и малой полуосей, соответственно, нулевого вращения по оси X, направления развертки по часовой стрелке и выбора развертки по меньшей дуге.
 Выполнить абсолютную вертикальную операцию  lineto  к местоположению (  x+width  ,  y+height-ry  ), где  height  — это атрибут 'height' прямоугольного элемента, преобразованный в пространство пользователя.
 Выполнить операцию абсолютной эллиптической дуги для координат (  x+width-rx  ,  y+height  ).
 Выполнить абсолютную горизонтальную операцию  lineto  до местоположения (  x+rx  ,  y+height ).
 Выполнить операцию абсолютной эллиптической дуги для координат (  x  ,  y+height-ry  ).
 Выполнить абсолютную вертикальную операцию  lineto  до местоположения (  x  ,  y+ry  ).
 Выполнить операцию абсолютной эллиптической дуги для координат (  x+rx  ,  y  ).
 Выполнить замыкание пути (z) к координате, указанной в исходной операции перемещения.
 Если атрибуты 'rx' и 'ry' не указаны или равны нулю, команды эллиптической дуги следует опустить.
 Пример 09_01 показывает
 прямоугольник с острыми углами. Элемент 'rect' заполняется
 желтый и обведенный темно-синим.
 
 2" baseProfile="tiny">
  Пример rect01 — прямоугольник с острыми углами
  
  <прямо х = "1" у = "1"
        fill="none" stroke="blue" stroke-width="2"/>
  <рект х = "400" у = "100"
        fill="желтый" штрих="темно-синий" stroke-width="10" />

 
 Пример 09_02 показывает два
 прямоугольники со скругленными углами. 'rx' указывает, как округлить
 углы прямоугольников. Обратите внимание, что поскольку значение не было
 указано для атрибута 'ry', ему будет присвоено
 то же значение, что и атрибут 'rx'.
 

 
 9.
  3 «Круг»
 элемент Элемент «круг»
 определяет окружность на основе центральной точки и радиуса.
 В текущей пользовательской системе координат,
 штриховые операции на окружности начинаются в точке (cx+r,cy)
 а затем пройти через точки (cx,cy+r), (cx-r,cy), (cx,cy-r) и, наконец, вернуться к (cx+r,cy).
 Для операций поглаживания имеется только один отрезок линии
 у которого начало соединено с концом.
  Определения атрибутов: 
 cx = "<координата>"
 Координата центра оси X
 круг.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 cy = "<координата>"
 Координата центра оси Y
 круг.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 г = "<длина>"
 Радиус окружности.
 Отрицательное значение не поддерживается. Нулевое значение отключает визуализацию элемента.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 фокусируемое = "истина" | "ложный" | "авто"
 Описание см. в определении атрибута.
 Анимация: да.
 Атрибуты навигации
 См. определение.
 Пример Circle01 состоит
 элемента «круг», который
 заполнены красным и обведены синим.
 

 
 9.
  4 «Эллипс»
 элемент Элемент «эллипс»
 определяет эллипс, который выровнен по оси с текущей пользовательской координатой
 система, основанная на центральной точке и двух радиусах.
 В текущей пользовательской системе координат,
 операции штриховки на эллипсе начинаются в точке (cx+rx,cy)
 а затем пройти через точки (cx,cy+ry), (cx-rx,cy), (cx,cy-ry) и, наконец, вернуться к (cx+rx,cy).
 Для операций поглаживания имеется только один отрезок линии
 у которого начало соединено с концом.
  Определения атрибутов: 
 cx = "<координата>"
 Координата центра оси X
 эллипс.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 cy = "<координата>"
 Координата центра оси Y
 эллипс.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 rx = "<длина>"
 Радиус эллипса по оси X. Отрицательное значение не поддерживается.
 Нулевое значение отключает визуализацию элемента.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 ry = "<длина>"
 Радиус эллипса по оси Y.
 Отрицательное значение не поддерживается.
 Нулевое значение отключает визуализацию элемента.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 фокусируемое = "истина" | "ложный" | "авто"
 Описание см. в определении атрибута.
 Анимация: да.
 Атрибуты навигации
 См. определение.
 Пример 09_04 ниже
 задает координаты двух эллипсов в
 пользовательская система координат, установленная атрибутом «viewBox» в элементе «svg» и атрибутом «transform» в элементах «g» и «эллипс». Оба
 эллипсы используют нулевое значение лакуны для атрибутов 'cx' и 'cy' (центр эллипса). эллипс). Второй эллипс вращается.
 

 
 9.5 «Линия»
 элемент 
 Элемент 'line' определяет
 отрезок, который начинается в одной точке и заканчивается в
 еще один.
  Определения атрибутов: 
 x1 = "<координата>"
 Координата начала линии по оси X.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 y1 = "<координата>"
 Координата начала линии по оси Y.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 x2 = "<координата>"
 Координата конца линии по оси X.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 y2 = "<координата>"
 Координата конца линии по оси Y.
 Значение лакуны
 равен «0».
 Анимация:
 да.
 фокусируемое = "истина" | "ложный" | "авто"
 Описание см. в определении атрибута.
 Анимация: да.
 Атрибуты навигации
 См. определение.
 Элемент «линия» должен отображаться таким образом, чтобы
 тот же результат, как если бы следующее
 путь был указан вместо
 (примечание: все значения координат и длины сначала преобразуются
 в координаты пользовательского пространства в единицах):
 Выполнение операции абсолютного перемещения
 в абсолютное местоположение (  x1  ,  y1  ), где  x1  и  y1  — это значения атрибутов «x1» и «y1» элемента «линия», преобразованные в
 пространство пользователя соответственно.
 Выполнить абсолютную линейную операцию
 в абсолютное местоположение (  x2  ,  y2  ), где  x2  и  y2  — это значения атрибутов «x2» и «y2» элемента «линия», преобразованные в
 пространство пользователя соответственно.
 Поскольку элементы «линии» являются одиночными
 линии и поэтому являются геометрически одномерными, они не имеют
 интерьер; таким образом, «линейные» элементы никогда не
 заполнено (см. свойство fill).
 Пример 09_05 ниже
 задает координаты пяти линий в
 пользовательская система координат, установленная атрибутом «viewBox» в элементе «svg». Линии имеют
 различной толщины.
 

 
 9.
  6 «Ломаная линия»
 элемент Элемент «полилиния»
 определяет набор соединенных прямых отрезков. Как правило,
 Элементы полилинии определяют
 открытые формы.
  Определения атрибутов: 
 точек = "<данные точек>"
 Точки, из которых состоит полилиния. Все координаты
 значения находятся в пользовательской системе координат.
 Пустое значение атрибута (points="") отключает визуализацию элемента.
 Значение лакуны
 это пустая строка.
 Анимация:
 да.
 фокусируемое = "истина" | "ложный" | "авто"
 Описание см. в определении атрибута.
 Анимация: да.
 Атрибуты навигации
 См. определение.
 Если указано нечетное количество координат, то
 элемент обрабатывается так, как если бы атрибут не был указан.
 Элемент «полилиния» должен быть визуализирован таким образом, чтобы
 тот же результат, как если бы следующее
 вместо этого был указан путь:
 Выполнение операции абсолютного перемещения
 к первой паре координат в списке точек.
 Для каждой последующей пары координат выполнить абсолютную
 линиято
 операции с этой парой координат.
 Пример 09_06 ниже
 задает полилинию в пользовательской системе координат, установленной
 атрибутом «viewBox» элемента «svg».
 
 7 «Многоугольник»
 элемент Элемент 'многоугольник'
 определяет замкнутую форму, состоящую из набора связанных
 отрезки прямой линии.
  Определения атрибутов: 
 точек = "<данные точек>"
 Точки, из которых состоит многоугольник. Все координаты
 значения находятся в пользовательской системе координат.
 Пустое значение атрибута (points="") отключает визуализацию элемента.
 Значение лакуны
 это пустая строка.
 Анимация:
 да.
 фокусируемое = "истина" | "ложный" | "авто"
 Описание см. в определении атрибута.
 Анимация: да.
 Атрибуты навигации
 См. определение.
 Если в «точках» указано нечетное количество координат
 атрибут, то он рассматривается как неподдерживаемое значение.
 Элемент 'polygon' должен быть визуализирован таким образом, чтобы
 тот же результат, как если бы следующее
 вместо этого был указан путь:
 Выполнение операции абсолютного перемещения
 к первой паре координат в списке точек.
 Для каждой последующей пары координат выполнить абсолютную
 линиято
 операции с этой парой координат.
 Выполнить закрытый путь
 команда.
 Пример 09_07 ниже
 задает два многоугольника (звезду и шестиугольник) в
 пользовательская система координат, установленная атрибутом «viewBox» в элементе «svg».
 

 
 9.