Похоже, что в Chrome в настоящее время есть проблема с mask-size, когда он заставляет SVG-изображение маски придерживаться своих первоначальных пропорций.
div {
background: lime;
font-size: 20px;
height: 150px;
width: 300px;
-webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam, vitae, voluptates laudantium illum modi praesentium consequuntur deleniti facere sint aperiam sapiente! Illo nam dicta magnam error, numquam nostrum soluta?
</div>
Запустите этот код в Firefox, и стартовый SVG будет правильно покрывать 100% ширины и высоты div.Запустите это в Chrome, и форма будет максимально большой, учитывая пропорции изображения.
Я понимаю, что на момент этого вопроса эта технология еще не была полностью стабильной, но я хотел бы использовать еетем не менее.Есть ли способ обойти это ограничение в Chrome?Или, возможно, альтернативный CSS, который я могу использовать, чтобы применить маску или клип ко всему элементу, независимо от его размеров?