В качестве заливки можно задавать none, цвета (в т.ч. именованные), ключевые слова (currentColor и transparent), а также градиенты и паттерны.
Отвечает за заливку элемента.
Возможные значения: none, ключевые слова, цвета, паттерны и градиенты. Значение по умолчанию — black.
<svg width="200" height="200">
<defs>
<symbol id="s-rect">
<rect width="70" height="70"/>
</symbol>
<linearGradient id="g-green"
x1="0%" y1="0%"
x2="0%" y2="90%">
<stop offset="0%" stop-color="yellowgreen" />
<stop offset="90%" stop-color="green" />
</linearGradient>
</defs>
<use xlink:href="#s-rect"
x="20" y="20"
fill="hsla(348, 83%, 47%,.3)"/> <!-- HSLA -->
<use xlink:href="#s-rect"
x="110" y="20"
fill="rgb(255, 215, 0)"/> <!-- RGB -->
<use xlink:href="#s-rect"
x="20" y="110"
fill="url(#g-green)"/> <!-- Градиент -->
<use xlink:href="#s-rect"
x="110" y="110"
fill="skyblue"/> <!-- Цвет по названию -->
</svg>
Свойство fill-rule определяет как будут заливаться сложные фигуры, имеющие пересечения внутри себя. Для простых фигур ни на что не влияет.
Возможные значения: nonzero, evenodd.
fill-rule="nonzero" интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальётся полностью (справа):
Атрибут fill-opacity управляет прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Примечание: Firefox не любит значения в процентах для градиентов.
<!-- ... -->
<use xlink:href="#s-rect"
x="20" y="20"
fill="url(#g-red)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
x="50" y="50"
fill="hsl(50, 100%, 50%)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
x="80" y="80"
fill="url(#g-green)" fill-opacity=".5"/>
<!-- ... -->
Вернуться в раздел SVG