Why does the mask in svg by path not work?

Question

Layout

There is an image with people, it is necessary to highlight when hovering over certain people. Made as follows. Created svg where this image is inserted and rendered people, polygons turned out but through the path tag. Using a mask I select them. But it so happened that if I make a mask like this

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

Those. I use paththat all the image is visible. But if I translate the points from the path into polygon points and replace this entire mask with <polygon />, then everything is cut out normally. Are there any restrictions on creating a mask? And can I still translate pathinto polygon, then you can find out how this is done? (There are a lot of converters on the network, but I can’t even find how to translate on my own, or I’m stupid specifically).

Answer 1

mask/path must be placed above image, between defs
you also miss important headers due to which references to mask will not work,
for example, these :

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>