Заливка и обводка
=================

* « Предыдущая статья
* Следующая статья »

Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.

Атрибуты заливки и обводки (Fill and Stroke Attributes)
-------------------------------------------------------

### Раскраска (Painting)

Основная раскраска может быть сделана установкой двух свойств на ноде - *fill* и *stroke. Fill -* устанавливает цвет внутри объекта, а *stroke* задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML - названия цветов (например, *red)*, rgb-значения, hex-значения, rgba-значения и т.д.


```xml
 <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
 fill-opacity="0.5" stroke-opacity="0.8"/>
```


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

**Примечание:** Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение *fill-opacity/stroke-opacity -* будут применены оба.

### Обводка (Stroke)

Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.

![](/ru/docs/Web/SVG/Tutorial/Fills_and_Strokes/svg_stroke_linecap_example.png)


```xml
<?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` обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
* `square` в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка - это половина заданного значения *stroke-width.*
* `round` задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром *stroke-width.*

Используйте `stroke-linejoin`, чтобы определить, как соединять обводку двух сегментов линии.

![](/ru/docs/Web/SVG/Tutorial/Fills_and_Strokes/svg_stroke_linejoin_example.png)


```xml
<?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`.

![](/ru/docs/Web/SVG/Tutorial/Fills_and_Strokes/svg_stroke_dasharray_example.png)


```xml
<?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 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.

Также есть дополнительные **stroke** и **fill** свойства: `fill-rule`, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; `stroke-miterlimit`, which determines if a stroke should draw `miters` и `stroke-dashoffset`, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

Использование CSS (Using CSS)
-----------------------------

В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что `fill`, `stroke`, `stroke-dasharray` и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде `width`, `height` или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.

**Примечание:** Спецификация SVG строго разделяет атрибуты на *свойства* и другие атрибуты. Первые могут быть изменены через CSS, а вторые - нет.

CSS может использоваться инлайн через атрибут `style`:


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


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


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


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


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


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


```xml
<?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 выглядит примерно так


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

* « Предыдущая статья
* Следующая статья »