@pilolin
HTML программист

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

Есть изображение с людьми, необходимо сделать подсветку при наведении на определенных людей. Сделал следующим образом. Создал svg где вставлено изображение это и отрисовал людей, получились полигоны но через тег path. Используя маску я выделяю их. Но случилось так что если я делаю маску такую
<svg>
  <image mask="url(#mask)" xlink:href="изображение" />
  <mask id="mask">
    <path fill="white" d="..." />
  </mask>
</svg>


Т.е. использую path то все изображение видно. Но если точки из path переведу в точки полигона и заменю всю эту маску на <polygon />, то все вырезается нормально. Есть какие то ограничения на создание маски? И может мне все таки переводить path в polygon, тогда можно узнать как это делается? (в сети куча конвертеров есть но как перевести самостоятельно чет не могу найти, или туплю конкретно).
  • Вопрос задан
  • 560 просмотров
Решения вопроса 1
LenovoId
@LenovoId Куратор тега SVG
svg, css,js
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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы