Основные формы SVG
Для создания прямоугольника с помощью SVG используется тег <rect>. Пример:
1 | <rect x="100" y="100" width="400" height="200" fill="yellow" stroke="black" stroke-width="3" /> |
Основные параметры:
- x, y координаты левого верхнего угла квадрата;
- width, height ширина и высота фигуры. В некоторых случаях, может задаваться в процентах
- fill цвет заполнения фигуры
- stroke цвет контура
- stroke-width ширина контура
1 2 3 4 5 6 | <?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 500 600" version = "1.1"> <rect x = "100" y = "100" width = "400" height = "200" fill = "yellow" stroke = "black" stroke-width = "3"/> <rect x = "100" y = "350" rx = "100" ry = "50" width = "400" height = "200" fill = "salmon" stroke = "black" stroke-width = "3"/> </svg> |
Следующая фигура — круг.
1 | <circle cx="100" cy="100" r="80" fill="orange" stroke="navy" stroke-width="10" /> |
Параметры:
- cx, cy координаты центра круга.
- r радиус круга
- fill цвет заливки фигуры
- stroke цвет контура
- stroke-width ширина контура
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"> <circle cx = "100" cy = "100" r = "80" fill = "orange" stroke = "navy" stroke-width = "10"/> </svg> |
Подробнее SVG Circle