Cheizer
@Cheizer

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

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

Есть рисунок
mountains-hero.jpg

Есть маска SVG
stampTiles.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>


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

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

Подскажите пожалуйста как применить такую SVG маску из файла?
Вот живой пример https://codepen.io/Cheizer/pen/ExxYNZr
  • Вопрос задан
  • 760 просмотров
Решения вопроса 2
Cheizer
@Cheizer Автор вопроса
Ankhena подсказал решение, маску нужно сделать белой
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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