Почему не работает SVG маска с PNG?

Question

[Cheizer]

Друзья, объясните пожалуйста, почему не работает PNG маска? Почему основное изображение становится мутным? Не могу понять. Вот такая засада.


Сам рисунок


Маска PNG


Делаю как положено

<svg width="500" height="500" viewBox="0 0 500 500">
  <defs>
    <mask id="mask">
      <image width="500" height="500" xlink:href="https://i.ibb.co/BgqMrqh/Image4m.png" />
    </mask>
  </defs>
  <image mask="url(#mask)" width="500" height="500" xlink:href="https://c402277.ssl.cf1.rackcdn.com/photos/2325/images/hero_small/mountains-hero.jpg" />
</svg>

Вот живой пример https://codepen.io/Cheizer/pen/ExxYNZr

Может я саму PNG маску не правильно делаю? :( Если да то как правильно?

Comments

[Ankhena]

Смысл маски в png? Нарисуйте в svg.

[Cheizer]

Ankhena, в SVG вообще не получилось, Вот сделал, рисунок вообще пропадает, то ли перекрывает его SVG или еще что то, не понимаю :(

[Cheizer]

Ankhena, s SVG та же история, рисунок мутный и полупрозрачный. Разобрался с размером.

[Ankhena]

Роман Кузнецов, сделайте белой

[Cheizer]

Ankhena, Точно :) даже не знал, благодарю! Осталось с SVG так же попробовать. Отпишитесь как отдельный комментарий пожалуйста, отмечу решением, вы как ответ написали на мой, нет возможности отметить вас как решение в таком варианте.

Answer 1

[Cheizer]

решение подсказал Ankhena маску нужно сделать белой