Как растянуть svg маску по высоте?

#html #css #svg #inkscape

Изображение обрезается, как растянуть svg маску по высоте?  

Оригинал



.item {
  height: 500px;
}

.svg-mask {
  width: 100%;
  overflow: hidden;
}

.image-with-mask {
  width: 100%;
  height: auto;
  mask: url(#mask-wrapper);
}

  






    

Ответы

Ответ 1

Решил добавить новый ответ, чтобы не смешивать два разных подхода. 

В первом ответе я обращал ваше внимание, что браузеры неодинаково рассчитывают позиционирование.
Поэтому в хроме была лишняя обрезка.    

Второй момент - в Firefox'e были заметны ступеньки, так происходит при сильном увеличении
растровой картинки.  Этот эффект возник потому-что вы натягивали маску шириной 200px
на картинку шириной 1500px. 
Чтобы избавиться от этих двух нежелательных дефектов сделаем следующее.  

Решение:  


Перерисуем маску сравнимую по размерам с изображением


Открываем в векторном редакторе нужное изображение, 

но не встраиваем его, а связываем, то есть в файле на выходе будет ссылка на это
изображение: 

  

Рисуем путь, который обеспечивает нужную форму маски:        

        


Сохраняем файл в векторном редакторе и забираем из него патч, который будет основой
нашей    маски.     


Пишем код, реализующий маску


  
  
   


Белый прямоугольник в маске пропускает сквозь себя всё изображение, а черный полукруглый
патч, вырезает нужную форму.  









Изображение адаптивно к разному размеру экрана.     

Если необходимо будет, как-то изменить размеры изображения, то изменяйте width height
в процентах шапке svg       

width="100%" height="100%" viewBox="0 0 1500 843"


Ответ 2

Вот так, это выглядит в Firefox`е: 

    

Всё дело в том, что Chrome и Firefox несколько по разному относятся к позиционированию
маски, клиппатча относительно окна браузера. 
Чтобы смотрелось одинаково во всех браузерах, я убрал стили, которые излишне влияют
на позиционирование   и добавил команду: 

preserveAspectRatio="xMinYMin meet"






  







Работает во всех браузерах и даже в IE.