Тип заливки

Классы fill-nonzero и fill-evenodd задают fill-rule — правило, по которому браузер решает, что внутри фигуры. Берите fill-evenodd, чтобы вложенный контур стал отверстием, а не закрасился.

Пример

Правила

Квадрат с вложенным квадратом и пятиконечная звезда, нарисованная одним контуром.

HTML

<div class="grid grid-col-1 sm:grid-col-2 gap-3">
  <div class="flex flex-col gap-1 items-center">
    <div class="flex gap-2">
      <svg class="w-e4 h-e4 fill-primary fill-nonzero" viewBox="0 0 120 120" aria-hidden="true"><path d="M10 10h100v100h-100z M40 40h40v40h-40z"/></svg>
      <svg class="w-e4 h-e4 fill-primary fill-nonzero" viewBox="0 0 120 120" aria-hidden="true"><path d="M60 8 92 108 8 46h104L28 108z"/></svg>
    </div>
    <code class="text-1/2 color-on-surface-variant">fill-nonzero</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <div class="flex gap-2">
      <svg class="w-e4 h-e4 fill-primary fill-evenodd" viewBox="0 0 120 120" aria-hidden="true"><path d="M10 10h100v100h-100z M40 40h40v40h-40z"/></svg>
      <svg class="w-e4 h-e4 fill-primary fill-evenodd" viewBox="0 0 120 120" aria-hidden="true"><path d="M60 8 92 108 8 46h104L28 108z"/></svg>
    </div>
    <code class="text-1/2 color-on-surface-variant">fill-evenodd</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`fill-nonzero`	`fill-rule: nonzero`	—
`fill-evenodd`	`fill-rule: evenodd`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Какое правило выбрать

Класс	Что закрашивает
`fill-nonzero`	всё, что окружено контуром, с учётом направления обхода — значение по умолчанию
`fill-evenodd`	области, окружённые нечётным числом контуров: вложенный контур становится отверстием

HTML

<svg class="svg-4 fill-primary fill-evenodd" viewBox="0 0 120 120" aria-hidden="true">
  <path d="M10 10h100v100h-100z M40 40h40v40h-40z"/>
</svg>

Свойство наследуется: класс на <svg> действует на все фигуры внутри.

Ограничения

У семейства нет префиксов ширины экрана и состояния.

См. также

Цвет заливки

Навигация

Главное

Документация

Содержание