Свойство fill SVG

Заливка формы SVG определяет цвет внутри контура формы. Иначе говоря, это поверхность формы SVG. Заливка - это один из базовых свойств CSS SVG, которые можно установить для любой формы SVG.

Пример заливки

Заливка формы SVG представляет собой заливку внутри контура формы. Это пример заливки SVG:

<svg　width="500"　height="100"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　none;　fill:　#0000ff;"　/></svg>

Этот пример определяет круг с заливкой цвета синего (#0000ff) без цвета обводки. Вот изображение, которое было создано:

Пример заливки и обводки

Вы можете комбинировать цвет обводки и заливки SVG для формы SVG. Это пример обводки и заливки SVG:

<svg　width="500"　height="100"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

Этот пример использует более темный синий (#000066) цвет обводки и более светлый синий (#3333ff) цвет заливки для определения круга. Вот изображение, которое было создано:

fill-opacity

Свойство CSS fill-opacity SVG используется для установки неопределенности заливки цвета формы. fill-opacity использует значения между 0 и 1. Чем ближе значение к 0, тем прозрачнее заливка. Чем ближе значение к 1, тем менее прозрачна заливка. Значение по умолчанию fill-opacity равно 1, что означает, что заливка цвета полная непрозрачность.

Это пример SVG заливки неопределенности fill-opacity, который включает два круга с различной (fill-opacity):

<svg width="500" height="120">
<text　x="22"　y="40">Text　Behind　Shape</text>
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity:　0.3;　　"></path>
<circle cx="120" cy="50" r="25">
　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.7;
</svg>

Это изображение, которое было создано.

Обратите внимание, что текст за правой окружностью менее виден, чем за левой. Это потому, что fill-opacity правой окружности выше, чем у левой.

fill-rule

fill-rule определяет способ заливки сложных форм. fill-rule может принимать два разных значения. Эти значения:

• nonzero

• evenodd

Обычно, эти два значения определяют правила для внутреннего и внешнего контуров формы. Только внутренняя заливка, для круга это просто, но для более сложных форм это не так легко. Вот пример <path>:

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40">
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　style="stroke: #000000;
　　　　　　　　　fill: #6666ff;
　　　　　　　　　fill-rule: nonzero;
　　　　　　</path>
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40">
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　　　　style="stroke: #000000;
　　　　　　　　　fill: #6666ff;
　　　　　　　　　fill-rule: nonzero;
</svg>

Эти два примера путей各有 8 линий, каждая из которых нарисована в виде ромба, где больший ромб содержит меньший ромб. В левой линии внутренний ромб нарисован слева направо (по часовой стрелке). В правой линии внутренний ромб нарисован справа налево (против часовой стрелки). Это результат изображения с использованием fill-rule:non-zero.

Как вы видите, правило nonzero определяет направление и форму внутреннего ромба, по которому рисуется форма. Правило nonzero определяет, находится ли точка внутри или вне формы, следующим образом:

Нарисуйте линию (промежуточный луч) от точки к бесконечности в любом направлении. При каждом пересечении этого луча линией, если линия пересекает луч слева направо, добавьте 1 к счетчику; если линия пересекает луч справа налево, вычтите 1 из счетчика. После того как все линии, пересекающие луч, будут рассмотрены, если общее количество равно нулю, точка считается находящейся вне пути. Если общее количество не равно нулю, точка считается находящейся внутри пути.

Это пример одного и того же пути, использующего fill-rule:evenodd

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40">
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　style="stroke: #000000;
　　　　　　fill: #6666ff;
　　　　　　fill-rule: evenodd;"
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40">
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　style="stroke: #000000;
　　　　　　fill: #6666ff;
　　　　　　fill-rule: evenodd;"
</svg>

Эффект изображения после выполнения:

Значение evenodd буквально означает «четное-нечетное». По этому правилу, чтобы определить, находится ли точка внутри фигуры, от точки проведите射线 в любом направлении и проверьте количество точек пересечения с траекторией фигуры. Проведите линию (射线) от точки к бесконечности в любом направлении. Каждый раз, когда траектория пересекает射线, увеличивайте счетчик. Если общее количество четное, то точка находится снаружи. Если общее количество нечетное, то точка находится внутри формы.