SVG z-index не работает? Исправьте порядок контуров

Если контур SVG остается позади другой фигуры после увеличения CSS z-index, проверьте порядок элементов внутри SVG. При обычном порядке рисования SVG более ранняя фигура рисуется первой, а последующие закрывают ее. Чтобы вывести контур вперед, поместите его после фигур, которые он должен закрывать. Этот порядок определяет модель отрисовки SVG.

Сначала установите, где возникает перекрытие. Весь SVG позади шапки страницы — проблема HTML-компоновки; две фигуры внутри одного SVG — проблема порядка графики. Исправление ниже относится ко второму случаю.

Посмотрите разницу на одном знаке

Мы нарисовали исходный знак из трех частей: оранжевой звезды, синего диска и зеленой ленты. В левой панели звезда идет первой в SVG и имеет CSS position: relative и z-index: 999. Браузер вычисляет это значение z-index, но последующие диск и лента по-прежнему закрывают звезду. В правой панели меняется только порядок элементов: та же звезда идет последней и оказывается впереди.

Для теста использовался HeadlessChrome 141 со снимком экрана 1200 × 680. Сообщенный порядок дочерних элементов: звезда, диск, лента слева и диск, лента, звезда справа. Это узкая проверка обычных перекрывающихся дочерних элементов SVG, а не обещание для любого средства отрисовки, вложенной группы или эффекта.

Исправьте порядок в файле SVG

Откройте исходник SVG в текстовом редакторе или проверьте его объекты в векторном редакторе. Найдите перекрывающиеся фигуры и прочитайте их сверху вниз в файле. Более ранние соседние элементы рисуются первыми. Переместите объект, который должен оказаться впереди, после объектов, которые он должен закрывать, затем сохраните копию.

Например, этот упрощенный рисунок помещает звезду последней:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

Для этого исправления не нужно менять данные контуров и цвета заливки. Если в дизайнерском приложении есть команда Bring to Front, после нее экспортируйте SVG и проверьте сохраненную разметку или откройте файл заново. Видимая панель слоев редактора полезна, но следующее средство отрисовки читает именно передаваемый файл.

Для интерактивного SVG JavaScript может переместить существующий дочерний элемент в конец его текущего родителя:

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

Справка MDN по appendChild подтверждает, что добавление существующего узла перемещает его, а не создает вторую копию. Используйте это только тогда, когда изменение DOM — часть приложения. Для статического файла логотипа обычно понятнее задать нужный порядок в самом SVG.

Проверьте группы, отверстия и другие виды порядка

Если звезда принадлежит группе, перемещение в конец внутри этой группы все еще может оставить всю группу позади более поздней соседней группы. Проверьте структуру родителей. Переместите нужную группу, если вперед должно выйти все сгруппированное изображение; меняйте порядок ее дочерних элементов, если перекрываются только части внутри нее. Будьте осторожны при перемещении дочернего элемента из группы: группа может задавать преобразования, обрезку, непрозрачность или маску. Раздел модели отрисовки SVG о группах объясняет, почему сгруппированное содержимое отрисовывается вместе.

Исправление порядка объектов также не устраняет настоящее отверстие или зазор в геометрии контура. Если центр буквы или знака заполняется после экспорта, проверьте фигуры и итоговый файл. Более поздний непрозрачный объект может просто закрывать отверстие. Руководство по отверстиям SVG помогает отличить этот случай от проблем fill-rule или контуров. Если вместо этого появляется тонкая белая линия между соседними фигурами, выполните диагностику зазоров перед изменением порядка наложения.

Наконец, paint-order — другая настройка. Она меняет момент рисования заливки, обводки и маркеров одного элемента; она не помещает этот элемент над соседним контуром. Справка MDN по paint-order определяет эту область действия. Используйте руководство по paint-order, когда толстая обводка скрывает собственную заливку, а не когда одна цветная часть логотипа скрывает другую.

CSS z-index по-прежнему важен для позиционированных HTML-блоков и элементов flex или grid, как описывает MDN. Рассматривайте этот случай компоновки страницы отдельно от порядка контуров внутри SVG.

Как это выглядит с PerfectVector

Используйте существующий оригинал SVG, если он у вас есть. Повторная векторизация создаст новый набор фигур, не решив вопрос слоев. Если единственный исходник — сведенный логотип PNG или JPG, PerfectVector может помочь на предыдущем этапе: преобразуйте изображение в пробный SVG, затем проверьте отдельные части и их перекрытие в редакторе. Переместите восстановленные контуры в нужный порядок перед передачей. Преобразование не определяет передние объекты вашего дизайна и не гарантирует сохранение небольшого отверстия при трассировке.

Если исходное изображение содержит размытие, тени или мелкие надписи, ручная перерисовка этих деталей может оказаться надежнее трассировки. Более общее руководство по редактированию SVG рассматривает очистку контуров после преобразования.

Проверьте файл, который будете передавать

1. Сохраните копию исходного SVG и измените порядок только нужного объекта или группы.
2. Откройте сохраненный файл в браузере в размере, где перекрытие имеет значение. Сравните его с исходным дизайном.
3. Откройте его заново в принимающем редакторе или приложении. Проверьте то же перекрытие, а также маски, обрезанные области и отверстия.
4. Если SVG интерактивный, проверьте поведение указателя и наведения после перестановки. Новая верхняя фигура может получать взаимодействия там, где раньше их получала другая.
5. Если результат выглядит неверно только при одном масштабе или размере экспорта, проверьте швы из-за дискретизации или настоящие зазоры перед перемещением других объектов.

Для исходника только в растре создайте пробный SVG с PerfectVector, затем проверьте порядок контуров, отверстия и сохраненную отрисовку в нужном размере. Если файл уже содержит правильные векторные фигуры, начните с перестановки.

Частые вопросы

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

Меняет ли paint-order верхний объект SVG? Нет. Paint-order меняет последовательность заливки, обводки и маркеров внутри одной фигуры или текстового элемента. Чтобы изменить, какой объект закрывает другой, переставьте отдельные объекты.

Почему контур все еще скрыт после перемещения в конец его группы? Вся его группа может находиться позади другой группы. Проверьте родительские группы и все преобразования, обрезку, маски или непрозрачность, прежде чем перемещать дочерний элемент из его группы.

Источники

1. W3C — SVG 1.1 Rendering Model — Определяет порядок рисования элементов в документе SVG.
2. MDN — Node.appendChild() — Описывает перемещение существующего дочернего узла DOM при добавлении.
3. MDN — SVG paint-order attribute — Ограничивает paint-order заливкой, обводкой и маркерами фигуры.
4. MDN — CSS z-index property — Объясняет z-index для позиционированных элементов и элементов компоновки при наложении на странице.
5. W3C — SVG 2 Rendering Model — Описывает контексты наложения SVG, группировку и выбор целей указателя.