Атрибут fill имеет два разных значения. Для фигур и текста это атрибут представления, который задаёт цвет (или любой сервер заливки SVG, например градиент или узор), используемый для заливки элемента; для анимации он задаёт конечное состояние анимации.
Примечание: При использовании в качестве атрибута представления fill также имеет соответствующее свойство CSS: fill. Если указаны оба варианта, приоритет имеет свойство CSS.
Атрибут представления SVG fill и свойство CSS fill можно использовать со следующими элементами SVG:
Базовая заливка цветом и градиентом, а также анимация
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<!-- Basic color fill -->
<circle cx="50" cy="50" r="40" fill="pink" />
<!-- Fill circle with a gradient -->
<defs>
<radialGradient id="myGradient">
<stop offset="0%" stop-color="pink" />
<stop offset="100%" stop-color="black" />
</radialGradient>
</defs>
<circle cx="150" cy="50" r="40" fill="url(#myGradient)" />
<!--
Keeping the final state of an animated circle
which is a circle with a radius of 40.
-->
<circle cx="250" cy="50" r="20">
<animate
attributeType="XML"
attributeName="r"
from="0"
to="40"
dur="5s"
fill="freeze" />
</circle>
</svg>
Пример context-fill
В этом примере мы определяем три фигуры с помощью элементов <path>, задавая для каждой разные значения stroke и цвета fill. Мы также определяем элемент <circle> в качестве маркера с помощью элемента <marker>. Для каждой фигуры маркер применяется с помощью свойства CSS marker.
Для элемента <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>
Результат выглядит следующим образом:
Примечание: Элементы также могут использовать context-stroke и context-fill, чтобы наследовать значения stroke и fill, если на них ссылаются элементы <use>.
animate
Для элемента <animate> атрибут fill задаёт конечное состояние анимации.
Значение
freeze (Сохраняет состояние последнего кадра анимации) | remove (Сохраняет состояние первого кадра анимации)
Значение по умолчанию
remove
Анимируемый
Нет
animateMotion
Для элемента <animateMotion> атрибут fill задаёт конечное состояние анимации.
Значение
freeze (Сохраняет состояние последнего кадра анимации) | remove (Сохраняет состояние первого кадра анимации)
Значение по умолчанию
remove
Анимируемый
Нет
animateTransform
Для элемента <animateTransform> атрибут fill задаёт конечное состояние анимации.
Значение
freeze (Сохраняет состояние последнего кадра анимации) | remove (Сохраняет состояние первого кадра анимации)
Значение по умолчанию
remove
Анимируемый
Нет
circle
Для элемента <circle> атрибут fill является атрибутом представления, который задаёт цвет круга.
Для элемента <path> атрибут fill является атрибутом представления, который задаёт цвет внутренней области фигуры. (Внутренняя область определяется атрибутом fill-rule или свойством fill-rule.)
Для элемента <polygon> атрибут fill является атрибутом представления, который задаёт цвет внутренней области фигуры. (Внутренняя область определяется атрибутом fill-rule или свойством fill-rule.)
Для элемента <polyline> атрибут fill является атрибутом представления, который задаёт цвет внутренней области фигуры. (Внутренняя область определяется атрибутом fill-rule или свойством fill-rule.)
