SVG line element

SVG позволяет рисовать прямые линии с помощью элемента < line >. Нужно только задать X и Y координаты начальных и конечных точек линий. Координаты допускается указывать без единиц измерения, в этом случае они будут расцениваться как пиксели, или явно указать единицы измерения (pt, pc, cm, mm, em, in).

Атрибут Описание
X1 Начальная точка линии по оси абцисс
Y1 Начальная точка линии по оси ординат
X2 Конечная точка линии по оси абцисс
Y2 Конечная точка линии по оси ординат

Горизонтальная линияline1

Рис.1Рис.2

Цвет, прозрачность линии

Все параметры оформления линий задаются с помощью стилей внутри тега
style = ” “>. В примере ниже задается цвет линий. Ширина для всех линий задается “stroke-width” внутри тега группы <g >

Цветные линииline-opacity

Рис.3Рис.4

Прозрачность линий задается параметром – stroke-opacity: от “0” – полностью прозрачно, до “1” – непрозрачно 100%.

Пунктирные линии

Пунктирные линии реализуются с помощью атрибута stroke-dasharray. Первая цифра отвечает за длину черточки, вторая за пробел между черточками.
Комбинируя этими параметрами можно получить различные виды пунктирных линий, как показано на Рис.5 группа 1.

Обратите внимание на группу 2. Там показано, как можно соединить две прерывистые линии, чтобы получить одну пёструю ленту. Длина и пробелы обеих линии заданы с одинаковыми размерами – 10px, но начало второй линии сдвинуто относительно первой линии на 10px, поэтому черточка второй линии совмещается с пробелом первой линии.

В группе 4 на Рис.5 показаны четыре цифровых параметра атрибута stroke-dasharray:20 5 10 10. Первый параметр, 20 – длина черточки, 5 – длина пробела, затем 10 – длина черточки и 10 -длина пробела. Далее всё сначала – 20 длина черточки и т.д.

dasharray1dasharray2

Рис.5Рис.6

Атрибут stroke-linecap

Этот атрибут обеспечивает внешний вид концов линий см.Рис.7. Еще для примера, см.Рис.3, где можно улучшить внешний вид линий, сделав их концы круглыми, используя stroke-linecap=”round” см.Рис.8.

line-capline-color2

Рис.7Рис.8

Примеры анимации линии ⇛
следующая: SVG polyline ⇛

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