Друзья, что я делаю не так, подскажите пожалуйста, почему не работает моя 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