кроссбраузер css маска

Question

Я пытаюсь создать маску в css внутри svg с помощью и image.

-> Я вставляю изображение между 2 svg (в одном файле )

Я добавил класс обрезное изображение вот так

<image id="image-front" xlink:href="" class="crop-image" />

Это мой класс:

mask: url("/wp-content/themes/customtheme/assets/images/crop_image.svg");
-webkit-mask: url("/wp-content/themes/customtheme/assets/images/crop_image.svg");
height: 100%;
width: auto;

Этот код работает нормально на firefox, но не работает в chrome или сафари. Класс не вызывается в моем svg, но даже если я скопирую этот класс вручную в свой svg, он не сработает

Answer 1

Согласно caniuse , mask не поддерживается за пределами firefox. Для Chrome и Safari вы можете использовать mask-image.

Answer 2

Маскирование в CSS выполняется с использованием свойства mask-image, и изображение должно быть предоставлено как маска. Все, что на 100% черное в маске изображения, будет полностью видимым, все, что на 100% прозрачно, будет полностью скрыто, а все, что находится между ними, будет частично маскировать изображение. Линейные и радиальные градиенты в CSS являются сгенерированными изображениями, поэтому их можно использовать в качестве маски изображения. SVG, в которых используется элемент маски, также можно использовать в качестве маски изображения.