Latest web development tutorials

SVG многоугольник

SVG многоугольник - <многоугольник>

Пример 1

<Polygon> тег используется для создания графики, содержащие по крайней мере три стороны.

Полигоны представляют собой прямые линии, форма "закрыто" (все линии, подключенные).

замечание многоугольник из Греции. "Поли" а "многие", "гон" означает "угол".

Вот SVG код:

примеров

<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<Polygon точек = "200,10 250190 160210"
стиль = "заполнить: известь, инсульт: фиолетовый; инсультом ширина: 1" />
</ SVG>

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).

Анализ кода:

  • х и у координаты точек определения атрибутов для каждого угла многоугольника

Пример 2

В следующем примере создается четырехсторонний многоугольник:

Вот SVG код:

примеров

<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<Polygon точек = "220,10 300.210 170.250 123.234"
стиль = "заполнить: известь, инсульт: фиолетовый; инсультом ширина: 1" />
</ SVG>

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).


Пример 3

Используйте элемент <многоугольник>, чтобы создать звезду:

Вот SVG код:

примеров

<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<Polygon точек = "100,10 40.180 190,60 10,60 160.180"
стиль = "заполнить: известь, инсульт: фиолетовый; инсультом ширина: 5; заполнить правило: отлична от нуля;" />
</ SVG>

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).


Пример 4

Изменение заполнения правила атрибута "EvenOdd":

Вот SVG код:

примеров

<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<Polygon точек = "100,10 40.180 190,60 10,60 160.180"
стиль = "заполнить: известь, инсульт: фиолетовый; инсультом ширина: 5; заполнить правило: EvenOdd;" />
</ SVG>

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).