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

Изображение обрезается, как растянуть svg маску по высоте?
Оригинал
.item { height: 500px; } .svg-mask { width: 100%; overflow: hidden; } .image-with-mask { width: 100%; height: auto; mask: url(#mask-wrapper); }

Ответ

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

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

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

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

Изображение адаптивно к разному размеру экрана.
Если необходимо будет, как-то изменить размеры изображения, то изменяйте width height в процентах шапке svg
width="100%" height="100%" viewBox="0 0 1500 843"