freeCodeCamp

4.1 KiB

Raw Blame History

title	localeTitle
SVG Shapes	SVG Shapes

SVG Shapes

С помощью SVG можно создавать несколько форм. Чертеж SVG может использовать и объединять семь фигур: Путь, Прямоугольник, Круг, Эллипс, Линия, Полилиния и Многоугольник.

Дорожка

Элемент path является наиболее часто встречающимся и обычно генерируется программами, предназначенными для экспорта SVG-кода.

  <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />

В приведенном выше примере path генерирует символ «плюс» (+) при использовании внутри чертежа SVG. Элементы path SVG не создаются вручную, а сгенерированы с помощью программ проектирования, которые могут манипулировать векторной графикой, например Illustrator или Inkscape.

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

Прямоугольник rect рисует прямоугольник на экране и принимает шесть атрибутов.

  <rect x="0" y="0" width="100" height="50" rx="10" ry="10" />

x и y назначают положение верхнего левого угла прямоугольника, а width и height определяют размер прямоугольника. rx и ry назначают радиус углов прямоугольника, аналогично свойству CSS border-radius.

Круг

Круг элемент circle принимает три атрибута.

  <circle cx="100" cy="100" r="50" />

cx и cy назначают положение центра круга, а r присваивает радиус (размер) круга.

Эллипс

Элемент эллипса, ellipse , подобен элементу circle за исключением того, что радиус делится на два атрибута.

  <ellipse cx="100" cy="100" rx="50" ry="20" />

Опять же, cx и cy назначают положение центра эллипса, а теперь rx и ry назначают горизонтальный и вертикальный радиус эллипса соответственно. Большой rx даст «толстый» эллипс, а более крупный ry даст более тонкий эллипс. Если rx и ry равны, он образует круг.

Линия

Элемент line прост и принимает четыре атрибута.

  <line x1="0" x2="100" y1="50" y2="70" />

Атрибуты x1 и y1 назначают первую точку строки, а атрибуты x2 и y2 назначают вторую точку линии.

Ломаная

polyline - это серия связанных прямых линий, назначенных в одном атрибуте.

  <polyline points="0 100, 50 70, 60 40, 20 0" />

Атрибут points присваивает список точек, каждая точка разделяется запятой.

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

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

  <polygon points="0 100, 50 70, 60 40, 20 0" />

Этот пример будет иметь ту же форму, что и выше, чем polyline , но он будет нарисовать дополнительную строку, чтобы «закрыть» ряд строк.

Больше информации

MDN Документация: MDN

4.1 KiB Raw Blame History Unescape Escape