Атрибут SVG stroke-linecap
Опубликовано: 25 Февраля, 2022
Атрибут stroke-linecap определяет форму обводки, которая будет использоваться в конце открытого подпути. Это атрибут представления.
Синтаксис:
штрих-linecap = "формы"
Значения атрибутов:
- butt: значение этого атрибута указывает, что обводка не выходит за пределы двух своих конечных точек.
- round: значение этого атрибута указывает, что обводка будет расширяться на полукруг с диаметром, равным ширине обводки в его конечных точках.
- квадрат: это значение атрибута указывает, что обводка будет расширена прямоугольником в его конечных точках.
Мы будем использовать атрибут stoke-linecap для определения формы штриха.
Пример 1:
Выход:
Example 2:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 35 30" <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> </svg></body> </html> |
Выход:
Example 3:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 35 30" <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" /> </svg></body> </html> |
выход:
