Заполнение

В этом примере мы определяем три фигуры, используя элементы <path>, каждая с различным stroke и fill цветом, установленным на них. Мы также определяем элемент <circle> в качестве маркера через элемент <marker>. Каждая фигура имеет применённый маркер через свойство marker CSS.

Элемент <circle> имеет stroke="context-stroke" и fill="context-fill" установленные на нём. Поскольку он задаётся как маркер в контексте фигур, эти атрибуты заставляют его унаследовать fill и stroke установленные на элементе <path> в каждом случае.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <style>
    path {
      stroke-width: 2px;
      marker: url(#circle);
    }
  </style>
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"
        stroke="red" fill="orange" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"
        stroke="green" fill="lightgreen" />
  <path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"
        stroke="blue" fill="lightblue" />
  <marker id="circle" markerWidth="12" markerHeight="12"
          refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2"
            stroke="context-stroke" fill="context-fill"  />
  </marker>
</svg>

Вывод:

Для <animate>, fill определяет конечное состояние анимации.

Для <animateMotion>, fill определяет конечное состояние анимации.

Для <animateTransform>, fill определяет конечное состояние анимации.

Для <circle>, fill — это атрибут представления, определяющий цвет круга.

Для <ellipse>, fill — это атрибут представления, определяющий цвет эллипса.

Для <path>, fill — это атрибут представления, определяющий цвет внутренней части фигуры. (Внутренняя часть определяется атрибутом fill-rule или свойством fill-rule.)

Для <polygon>, fill — это атрибут представления, определяющий цвет внутренней части фигуры. (Внутренняя часть определяется атрибутом fill-rule или свойством fill-rule.)

Для <polyline>, fill — это атрибут представления, определяющий цвет внутренней части фигуры. (Внутренняя часть определяется атрибутом fill-rule или свойством fill-rule.)

Для <rect>, fill — это атрибут отображения, который определяет цвет прямоугольника.

Для <set>, fill определяет конечное состояние анимации.

Для <text>, fill — это атрибут отображения, который определяет цвет текста.

Для <textPath>, fill — это атрибут отображения, который определяет цвет текста.

Для <tref>, fill — это атрибут отображения, который определяет цвет текста.

Для <tspan>, fill — это атрибут отображения, который определяет цвет текста.