Заливки и контуры

Базовую окраску можно выполнить, установив два атрибута в узле: fill и stroke. Использование fill устанавливает цвет внутри объекта, а stroke устанавливает цвет линии, нарисованной вокруг объекта. Вы можете использовать те же схемы именования цветов CSS, что и в HTML, будь то имена цветов (например, red), значения rgb (например, rgb(255 0 0)), шестнадцатеричные значения и т. д.

<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect
    x="10"
    y="10"
    width="100"
    height="100"
    stroke="blue"
    fill="purple"
    fill-opacity="0.5"
    stroke-opacity="0.8"
    stroke-width="15" />
</svg>

Кроме того, вы можете задать непрозрачность fill или stroke отдельно в SVG. Они управляются атрибутами fill-opacity и stroke-opacity.

В дополнение к свойствам цвета доступно несколько других атрибутов для управления способом рисования контура на линии.

<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>

Свойство stroke-width определяет ширину этого контура. Контуры рисуются по центру пути. На примере выше путь показан розовым цветом, а контур — черным.

Второй атрибут, влияющий на контуры, — это свойство stroke-linecap, продемонстрированное выше. Оно управляет формой концов линий.

Существует три возможных значения для stroke-linecap:

• butt закрывает линию прямой кромкой, перпендикулярной (на 90 градусов) направлению контура и пересекает его конец.
• square имеет в основном тот же вид, но слегка расширяет контур за пределы фактического пути. Расстояние, на которое контур выходит за пределы пути, составляет половину stroke-width.
• round создает закругленный эффект на конце контура. Радиус этой кривой также контролируется stroke-width.

Используйте stroke-linejoin для управления тем, как рисуется соединение между двумя отрезками линии.

<?xml version="1.0" standalone="no"?>
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>

  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="none" stroke-linejoin="round"/>

  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>

Каждая из этих ломаных линий имеет два отрезка. Соединение, где они встречаются, контролируется атрибутом stroke-linejoin . Существует три возможных значения для этого атрибута. miter слегка расширяет линию за пределы её обычной ширины, чтобы создать прямоугольный угол, где используется только один угол. round создает закругленный отрезок линии. bevel создает новый угол, чтобы помочь в переходе между двумя отрезками.

Наконец, вы также можете использовать пунктирные линии на контуре, указав атрибут stroke-dasharray.

<?xml version="1.0" standalone="no"?>
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
  <path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>

Атрибут stroke-dasharray может принимать в качестве аргумента серию чисел, разделенных запятыми и/или пробелами.

Первое число указывает расстояние для залитой области, а второе — для незалитой области. Таким образом, в примере выше второй путь заполняет 5 пикселей, а затем 5 пустых пикселей, пока не заполнится следующая линия длиной 5 пикселей. Вы можете указать больше чисел, если хотите более сложный шаблон пунктирной линии. Первый пример задаёт три числа, в этом случае рендерер дважды прокручивает числа, чтобы создать равномерный шаблон. Итак, первый путь отображает 5 заполненных, 10 пустых, 5 заполненных, а затем повторяет, создавая 5 пустых, 10 заполненных, 5 пустых. Затем шаблон повторяется.

Доступны дополнительные свойства stroke и fill, включая fill-rule,, который определяет, как окрашивать фигуры, которые перекрывают друг друга; stroke-miterlimit, определяющий, следует ли рисовать срез; и stroke-dashoffset, который задаёт, где начать массив пунктира на линии.

Порядок отрисовки заливки и контура можно контролировать с помощью атрибута paint-order.

<?xml version="1.0" standalone="no"?>
<svg width="400" height="180" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline
    points="40 80 80 40 120 80"
    stroke-width="15"
    stroke="black"
    fill="coral"
    paint-order="fill" />

  <polyline
    points="40 140 80 100 120 140"
    stroke-width="15"
    stroke="black"
    fill="coral"
    paint-order="stroke" />
</svg>

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

В дополнение к установке атрибутов на объектах, вы также можете использовать CSS для стилизации заливок и контуров. Не все атрибуты можно задать через CSS. Атрибуты, связанные с заливкой и покраской, обычно доступны, поэтому fill, stroke, stroke-dasharray, и т. д. можно задать таким способом, помимо градиентных и шаблонных версий, показанных ниже. Атрибуты, такие как width, height, или <path> команды, не могут быть заданы через CSS. Лучше всего просто протестировать и узнать, что доступно, а что нет.

CSS можно вставить в элемент с помощью атрибута style:

 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>

Или его можно перенести в специальный раздел стилей, который вы включаете. Однако вместо того, чтобы помещать такой раздел в раздел <head> как в HTML, он включается в область, называемую <defs>.

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

<?xml version="1.0" standalone="no"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style><![CDATA[
       #MyRect {
         stroke: black;
         fill: red;
         paint-order: stroke;
       }
    ]]></style>
  </defs>
  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>

Перенос стилей в такую область может облегчить настройку свойств для больших групп элементов. Вы также можете использовать такие вещи, как :hover для создания эффектов наведения курсора:

#MyRect:hover {
  stroke: black;
  fill: blue;
}

Вы также можете указать внешний документ стилей для своих правил CSS с помощью обычного синтаксиса XML-stylesheet:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect height="10" width="10" id="MyRect"/>
</svg>

Где style.css выглядит примерно так:

#MyRect {
  fill: red;
  stroke: black;
}