Почему не работает SVG маска из файла?

Question

[Cheizer]

Друзья, что я делаю не так, подскажите пожалуйста, почему не работает моя SVG маска из файла?

Есть рисунок


Есть маска SVG


Делаю так

<svg width="587" height="390" viewBox="0 0 587 390">
  <defs>
    <mask id="mask">
      <image width="587" height="390" xlink:href="http://travel.toways.ru/stampTiles.svg" />
    </mask>
  </defs>
  <image mask="url(#mask)" width="587" height="390" xlink:href="https://c402277.ssl.cf1.rackcdn.com/photos/2325/images/hero_small/mountains-hero.jpg" />
</svg>

В итоге хочу получить картинку со скошенными внутрь углами.


Не работает, рисунок полностью пропадает почему-то :( есть мысль что не работает из-за того что SVG файл удаленно расположен, но нет, на локальном пробовал когда все рисунки в одной папке тот же результат.

Подскажите пожалуйста как применить такую SVG маску из файла?
Вот живой пример https://codepen.io/Cheizer/pen/ExxYNZr

Comments

[Ankhena]

Пропадает потому что черная, ....
А дальше разбираться с размерами

[Cheizer]

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

[Ankhena]

Роман Кузнецов, лень

Answer 1

[Владимир Сартаков]

Comments

[Cheizer]

Подскажите пожалуйста как управлять размерами? Я даже ширину маски не пойму где изменить

Answer 2

[Cheizer]

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