SVG <Rect>

SVG Формы

SVG имеет некоторые предопределенные элементы формы, которые могут быть использованы разработчиками:

• Прямоугольник <rect>
• Круг <circle>
• Эллипс <ellipse>
• Линия <line>
• Ломаная <polyline>
• Полигон <polygon>
• Путь <path>

В следующих главах будут объяснять каждый элемент, начиная с элемента вильного.

SVG Прямоугольник - <rect>

Пример 1

<rect> Элемент используется для создания прямоугольника и вариации формы прямоугольника:

Вот код SVG:

Code explanation:

• Ширина и высота атрибуты <rect> элемента определяют высоту и ширину прямоугольника
• style атрибут используется для определения свойств CSS для прямоугольника
• Свойство заполнения CSS определяет цвет заливки прямоугольника
• Свойство CSS-тактный ширина определяет ширину границы прямоугольника
• Свойство CSS хода определяет цвет границы прямоугольника

Пример 2

Давайте рассмотрим еще один пример, который содержит некоторые новые атрибуты:

Вот код SVG:

Code explanation:

• x атрибут определяет левое положение прямоугольника (например , х = "50" помещает прямоугольник 50 точек от левого края)
• y атрибут определяет верхнее расположение прямоугольника (например , у = "20" помещает прямоугольник 20 точек от верхнего края)
• Свойство CSS заполнения непрозрачности определяет прозрачность цвета заливки (legal range: 0 to 1) от (legal range: 0 to 1)
• Свойство CSS-тактный непрозрачности определяет прозрачность цвета обводки (legal range: 0 to 1) от (legal range: 0 to 1)

Пример 3

Определить степень непрозрачности всего элемента:

Вот код SVG:

Code explanation:

• Свойство CSS непрозрачности определяет значение непрозрачности для всего элемента (legal range: 0 to 1) от (legal range: 0 to 1)

Пример 4

Последний пример, создайте прямоугольник с закругленными углами:

Вот код SVG:

Code explanation:

• Гх и ry атрибуты округляет углы прямоугольника