Использование SVG в качестве маски изображения, которая растягивает полную ширину, но имеет вырезок с фиксированным разм ⇐ Html

[Anonymous]

im Использование SVGS в качестве маски-image для создания разделения разделителей.

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

Я устанавливаю консерваэспекттрий = 'none' Таким образом, что маска SVG растягивает полную ширину страницы. Выход, который остается фиксированной шириной, даже если страница становится все шире:

Я не ищу какое -либо решение, кроме Svg's, и я построил библику Маска-image . Я знаю, что могу сделать это с чем -то вроде: < /p>

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

clip-path: polygon(0 0, calc(50% - 80px) 0, 50% 50px, calc(50% + 80px) 0, 100% 0, 100% 100%, 0 100%);

Если это невозможно с SVG, то я рассмотрю вопрос о добавлении поддержки клипа в мою библиотеку разделителей, но я хотел бы знать, есть ли улов SVG, чтобы заставить это работать. Как вы можете видеть, если вы измените ширину просмотра, ширина треугольника также растягивается. Я хотел бы сделать это фиксированной шириной, позволяя остальной части разделителя распространяться на края. Это использует код SVG выше в качестве URI данных:
https://jsfiddle.net/e50qno79/образной[code]:root {
--divider-top-size: 100px;
--divider-shape: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201000%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpolygon%20points%3D%220%202%20250%202%20500%2096.44%20749.5%202%201000%202%201000%20100%200%20100%200%202%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
}

.top {
background: gray;
height: 50vh;
margin-bottom: calc(var(--divider-top-size) * -1);
}

.bottom {

background: blue;
height: 50vh;
mask-image: var(--divider-shape), linear-gradient(transparent calc(var(--divider-top-size) - 1px), black calc(var(--divider-top-size) - 1px));
mask-repeat: no-repeat;
mask-position: top, top, bottom;
mask-size: 100% var(--divider-top-size), 100% auto;

padding-top: var(--divider-top-size);
}< /code>


[/code]



Вот jsfiddle с использованием Clip-path, показывающего поведение, которое я пытаюсь воссоздать с помощью svgs и mask-image:
https://jsfiddle.net/kpd1lrgh/pring divessepempet. />

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

.top {
background: gray;
height: 50vh;
}

.bottom {
background: blue;
height: 50vh;
clip-path: polygon(0 0, calc(50% - 80px) 0, 50% 50px, calc(50% + 80px) 0, 100% 0, 100% 100%, 0 100%);
margin-top: -80px;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ed-cut-out