Применить z-index к пути SVG

Question

Есть ли способ, как применить z-index на пути SVG?

У меня есть простая стрелка SVG:

<svg class="arrow">
  <path class="line" />
  <path class="endpoint"/>
</svg>

Если я использую CSS, чтобы изменить Z-индекс целого .arrow все работает нормально, но когда я пытаюсь применить его только на .endpoint это не работает

Есть ли какое-то решение или обходной путь для этого?

Большое спасибо.

Answer 1

В качестве альтернативы вы можете использовать ""

Пример:

<svg>
    <circle id="shape1" cx="20" cy="50" r="40" fill="yellow" />
    <rect id="shape2" x="4" y="20" width="200" height="50" fill="grey" />
    <circle id="shape3" cx="70" cy="70" r="50" fill="blue" />
    <use id="use" xlink:href="#shape2" />
</svg>

Слой shape2 будет самым верхним слоем.

Answer 2

В SVG нет z-index, он использует модель художников. Вам придется удалить путь из DOM и повторно добавить его перед любыми элементами, которые должны быть поверх него, и после любых элементов, над которыми он должен быть поверх.

Как вы обнаружили, z-index работает только на полную <svg> Контент как средство визуализации html контролирует его расположение перед передачей в средство визуализации SVG для отрисовки внутреннего содержимого SVG.

Answer 3

Если у вас есть острая необходимость сделать это, вы можете определить явный порядок компоновки, используя альтернативные эффекты фильтра (если вам не нужна поддержка в Firefox или IE.)