SVG line polyline polygon
Для создания более сложных фигур, чем круги и прямоугольники, надо использовать элементы line (линии), polyline, или polygon.
Элемент line
Svg элемент line имеет два атрибута: координаты по оси X (x1,y1) и по оси Y (x2,y2).
1 2 3 4 5 | <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg viewBox = "0 0 200 200" version = "1.1"> <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" stroke = "black" stroke-width = "3"/> </svg> |
Элемент polyline
Атрибут point элемента polyline — это список точек соединения ломаной линии. Есть два варианта написания координат: через запятую points=»20,20 40,25 60,40 80,120 120,140 200,180″ или без points=»20 20 40 25 60 40 80 120 120 140 200 180″. Список интерпретируется как пары x-y в обоих случаях. Не используется для написания пар координат скобки — «(10,10)».
SVG Line
1 2 3 4 5 | <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg viewBox = "0 0 200 200" version = "1.1"> <polyline points = "20,20 40,25 60,40 80,120 120,140 200,180" fill = "none" stroke = "black" stroke-width = "3"/> </svg> |
Элемент polygon
Polygon — элемент похожий на polyline, только замкнутый.
SVG Polygon
1 2 3 4 5 | <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg viewBox = "0 0 200 200" version = "1.1"> <polygon points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill = "green" stroke = "black" stroke-width = "3"/> </svg> |
Элемент path имеет те же свойства, что и line, polyline, или polygon, только синтаксис сложнее.