Почему не работает маска в svg по path?

Question

[Алекс]

Есть изображение с людьми, необходимо сделать подсветку при наведении на определенных людей. Сделал следующим образом. Создал svg где вставлено изображение это и отрисовал людей, получились полигоны но через тег path. Используя маску я выделяю их. Но случилось так что если я делаю маску такую

<svg>
  <image mask="url(#mask)" xlink:href="изображение" />
  <mask id="mask">
    <path fill="white" d="..." />
  </mask>
</svg>

Т.е. использую path то все изображение видно. Но если точки из path переведу в точки полигона и заменю всю эту маску на <polygon />, то все вырезается нормально. Есть какие то ограничения на создание маски? И может мне все таки переводить path в polygon, тогда можно узнать как это делается? (в сети куча конвертеров есть но как перевести самостоятельно чет не могу найти, или туплю конкретно).

Answer 1

[Максим]

mask/path надо поместить выше image, между defs
так же у вас пропущены важные заголовки из за которых не будут работать ссылки на mask
к примеру вот эти :

xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" 
   version="1.1"
   viewBox=""

<svg>
<defs>
  <mask id="mask">
    <path fill="white" d="..." />
  </mask>
</defs>
  <image mask="url(#mask)" xlink:href="изображение" />
</svg>

Comments

[Алекс]

Заголовки все имеются, я сократил для наглядности здесь все. Попробую вставить маску в defs.