css маска свойств не работает должным образом для svg

Question

Css свойство clip-path работает нормально, но mask или -webkit-mask не работает должным образом в этом примере .

Пожалуйста, помогите мне решить эту проблему, потому что мой проект полностью зависит от маскировки изображения с помощью файла svg.

В clip-path я не могу изменить размер изображения в адаптивных представлениях, поэтому у меня есть только один способ решения этой проблемы.

Поэтому, пожалуйста, проверьте пример кода, возможно, я допустил ошибку.

Answer 1

Вам нужно уменьшить свой SVG-код и удалить все элементы g, чтобы сохранить только такой путь:

https://jsfiddle.net/hro4wbzf/

Затем вы используете это внутри mask, и при необходимости вы выполняете вращение с помощью CSS:

https://jsfiddle.net/7kyazn30/

Связано: Как изменить размер области ClipPath SVG?

Answer 2

Для огромного онлайн-svg я рекомендую вам использовать тег ... вместо того, чтобы передавать его полностью в свойстве url () вашего css, как вы это делали. Риск ошибки больше. Итак, вот что я предлагаю.

<mask  id="maskMaskSource" class="MaskType" maskContentUnits="objectBoundingBox">
<svg> .... </svg>
</mask>

И в вашем css:

#maskMaskSource {
mask-image: url(#maskMaskSource);
}
.MaskType {
mask-type: alpha;
}

Вы можете получить более подробное объяснение здесь: https://lab.iamvdo.me/css-svg-masks/#testM7