Адаптивный встроенный путь Clip SVG не занимает полную ширину родительского элемента даже с Clippathunits = "ObjectBound ⇐ CSS

[Anonymous]

У меня есть элемент секции, который содержит встроенный SVG, который действует как маска для отсечения, не занимает полную ширину родительского элемента, даже если это отзывчивый клип-пат.@media (max-width: 1024px) {
.content-wrapper {
height: 100%;
overflow-y: hidden;
}

.content {
height: 100%;
overflow-y: scroll;
scrollbar-width: none;
}

.content-wrapper::-webkit-scrollbar {
display: none; /* Hides the scrollbar */
}

.section {
height: calc(100vh - clamp(1.5rem, 5vw, 2.5rem) * 2);
}
}

.content-wrapper {
padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.5rem) 0rem;
background-color: #080609;
}

.hero-mask {
position: absolute;
width: 100%;
height: 100%;
}

.section#hero {
clip-path: url(#heroClip);
background: var(--clr-primary);
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #FFD369;
}< /code>













< /code>
< /div>
< /div>
< /p>
Существует немного кода JavaScript, который перенаправляет событие прокрутки на основной элемент, но это не имеет отношения к этому вопросу. П.с. Это часть разработки тем WP.


Подробнее здесь: https://stackoverflow.com/questions/795 ... ement-even