SVG circle element

SVG <circle> element отвечает за вывод базовой фигуры – окружности.

Атрибут Описание
cx координата центра окружности по оси абцисс
cy координата центра окружности по оси ординат
r радиус окружности
style стиль оформления окружности

На рисунке ниже показано, как можно оформлять внешний вид при помощи <style>

circle

Рис.1

Центр окружности поз.4 Рис.1 находится на нижней границе viewBox равной 400px, поэтому выводится только верхняя половина окружности.

Для отрисовки светофора использовались только окружности и прямоугольники.
В следующем примере см. Рис.1 для создания образа “глаз” использовано всего четыре окружности разного цвета. Код в листинге ниже для левого глаза.

Для отрисовки примера садового шланга, см. Рис.1, использовано 12 окружностей, центр каждой из которых сдвигался на 5 пикселей вправо и вверх относительно центра предыдущей окружности.

⇚ SVG rect element SVG ellipse element ⇛

Добавить комментарий