SVG <rect>

SVG имеет некоторые предопределенные элементы форм, которые могут быть использованы и управляемы разработчиками.

Формы SVG

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

  • Прямоугольник <rect>
  • Круг <circle>
  • Эллипс <ellipse>
  • Линия <line>
  • Ломаная линия <polyline>
  • Многоугольник <polygon>
  • Путь <path>

В следующих разделах мы расскажем о этих элементах, начнем с прямоугольника.

Элемент <rect>

Элемент <rect> можно использовать для создания прямоугольников и их вариантов.

Чтобы понять, как это работает, скопируйте этот код в блокнот и сохраните его как файл "rect1.svg". Поместите этот файл в веб-каталог:

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Комментарий к коду:

  • Атрибуты width и height элемента rect определяют ширину и высоту прямоугольника
  • Атрибут style используется для определения свойств CSS
  • Атрибут fill CSS определяет цвет заливки прямоугольника (значение rgb, цветовое имя или шестнадцатеричное значение)
  • Атрибут stroke-width CSS определяет ширину рамки прямоугольника
  • Атрибут stroke CSS определяет цвет рамки прямоугольника

Просмотреть этот пример

Давайте посмотрим на другой пример, содержащий новые атрибуты:

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Пример объяснения:

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

Просмотр примера

Указать прозрачность для всего элемента:

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Комментарий к коду:

Параметр opacity в CSS определяет прозрачность всего элемента (допустимый диапазон: 0 - 1)

Просмотр примера

Последний пример, создание прямоугольника с закругленными углами:

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Комментарий к коду:

Параметры rx и ry позволяют矩形м иметь закругленные углы.

Просмотр примера