SVG <rect>

Фігури SVG

SVG має деякі попередньо визначені елементи форми, які можуть використовуватися розробниками:

• Прямокутник <rect>
• Коло <circle>
• Еліпс <ellipse>
• Лінія <line>
• Полілінія (Крива) <polyline>
• Багатокутник <polygon>
• Шлях <path>

У наступних розділах буде пояснено кожен елемент, починаючи з елемента rect.

SVG Прямокутник - <rect>

Приклад 1

Елемент <rect> використовується для створення прямокутника та варіантів форми прямокутника:

Ось код SVG:

Пояснення коду:

• Атрибути width та height елементу <rect> визначають висоту та ширину прямокутника
• Атрибут style використовується для визначення властивостей CSS для прямокутника
• CSS властивість fill визначає колір заливки прямокутника
• CSS властивість stroke-width визначає ширину рамки прямокутника
• CSS властивість stroke визначає колір рамки прямокутника

Приклад 2

Давайте розглянемо інший приклад, який містить деякі нові атрибути:

Ось код SVG:

Пояснення коду:

• Атрибут x визначає ліве положення прямокутника (наприклад, x="50" розміщує прямокутник на відстані 50 пікселів від лівого поля)
• Атрибут y визначає верхню позицію прямокутника (наприклад, y="20" розміщує прямокутник на 20 пікселів від верхнього поля)
• CSS властивість fill-opacity визначає непрозорість кольору заливки (допустимий діапазон: від 0 до 1)
• CSS властивість stroke-opacity визначає непрозорість кольору обведення (допустимий діапазон: від 0 до 1)

Приклад 3

Визначити непрозорість для всього елемента:

Ось код SVG:

Пояснення коду:

• CSS властивість opacity визначає значення непрозорості для всього елемента (допустимий діапазон: 0 to 1)

Приклад 4

Створити прямокутник із закругленими кутами:

Ось код SVG:

Пояснення коду:

• Атрибути rx та ry округлюють кути прямокутника