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

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

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

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

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

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

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