SVG отображается неправильно при использовании в качестве изображения-маски.CSS

Разбираемся в CSS
Ответить
Anonymous
 SVG отображается неправильно при использовании в качестве изображения-маски.

Сообщение Anonymous »

У меня есть SVG, который я пытаюсь использовать в качестве изображения-маски, которое включает в себя несколько штрихов, однако при использовании в качестве изображения-маски штрихи не отображаются.
< div class="snippet">

Код: Выделить всё

main {
position: relative;
flex: 1;
padding: 140px 60px 0 140px;
&::before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 32px;
height: 100%;
content: "", ;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='1073' fill='none' viewBox='0 0 46 1073'%0A%3E%3Cpath fill='%23fff' d='M43.75 0H1116.75V41H43.75z' transform='rotate(90 43.75 0)' %3E%3C/path%3E%3Cpath stroke='green' stroke-width='2.5' d='M2 0v1072.9M44.75 0v1072.9' %3E%3C/path%3E%3Cpath stroke='green' stroke-miterlimit='10' stroke-width='2.5' d='M16.75 1071.65h27.28M29.84 1057.55h14.1M29.84 1043.45h14.1M29.84 1029.35h14.1M29.84 1015.24h14.1M16.66 1001.14h27.28M29.84 986.04h14.1M29.84 971.94h14.1M29.84 957.83h14.1M29.84 943.73h14.1M16.66 929.63h27.28M29.84 914.53h14.1M29.84 900.42h14.1M29.84 886.32h14.1M29.84 872.22h14.1M16.66 858.12h27.28M29.84 843.01h14.1M29.84 828.91h14.1M29.84 814.81h14.1M29.84 800.71h14.1M16.66 786.61h27.28M29.84 771.5h14.1M29.84 757.4h14.1M29.84 743.3h14.1M29.84 729.2h14.1M16.66 715.1h27.28M29.84 699.99h14.1M29.84 685.89h14.1M29.84 671.79h14.1M29.84 657.69h14.1M16.66 643.59h27.28M29.84 628.48h14.1M29.84 614.38h14.1M29.84 600.28h14.1M29.84 586.18h14.1M16.66 572.08h27.28M29.84 556.97h14.1M29.84 542.87h14.1M29.84 528.77h14.1M29.84 514.67h14.1M16.66 500.57h27.28M29.84 485.46h14.1M29.84 471.36h14.1M29.84 457.26h14.1M29.84 443.16h14.1M16.66 429.06h27.28M29.84 413.95h14.1M29.84 399.85h14.1M29.84 385.75h14.1M29.84 371.65h14.1M16.66 357.55h27.28M29.84 342.44h14.1M29.84 328.34h14.1M29.84 314.24h14.1M29.84 300.14h14.1M16.66 286.04h27.28M29.84 270.93h14.1M29.84 256.83h14.1M29.84 242.73h14.1M29.84 228.63h14.1M16.66 214.53h27.28M29.84 199.42h14.1M29.84 185.32h14.1M29.84 171.22h14.1M29.84 157.12h14.1M16.66 143.02h27.28M29.84 127.91h14.1M29.84 113.81h14.1M29.84 99.71h14.1M29.84 85.61h14.1M16.66 71.5h27.28M29.84 56.4h14.1M29.84 42.3h14.1M29.84 28.2h14.1M29.84 14.09h14.1' %3E%3C/path%3E%3C/svg%3E");
}
}



Подробнее здесь: https://stackoverflow.com/questions/783 ... mask-image
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»