Как сдвинуть картинку в svg маске?

Question

[DaBags]

Первый раз сталкиваюсь с svg, кое-что получилось нагуглить, но одна проблема осталась.
Код: https://jsfiddle.net/t3df6yku/

Создается... маска? И ниже все это дело объединяется с картинкой.

Проблема в том, что видна верхняя левая часть картинки и нужно ее как-то отцентрировать (и есть ли возможность сделать что-то вроде object-fit: cover?). Пытался сам сдвинуть, но сдвигается вся капля. Кто подскажет как это сделать или какой запрос гуглить? (т.к. с svg почти не работал не знаю терминологии)

P.S. нужно учесть что таких картинок будет несколько

Answer 1

[RAX7]

что-то вроде object-fit: cover

Добавь

preserveAspectRatio="xMidYMid slice" width="100%" height="100%"

в image