Проблема с удалением части элемента SVG, пересекающей линию
Я попытался удалить пересечение основания полукруга и линии с помощью clip-path в .line, но это не сработало. Это правильный метод или есть другой способ?
Я попытался удалить пересечение основания полукруга и линии, используя clip-path
в .line, но это не сработало. Это правильный метод или есть другой способ?
Как мы можем решить эту проблему? Как мы можем удалить часть, указанную на изображении?
body {
margin: 0vh 0vw;
}
.header {
position: relative;
width: 100%;
height: 12vh;
background-color: #004d40;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
top: 0;
}
.line {
position: absolute;
left: 0;
top: calc(50%);
width: 100%;
height: 0.25vh;
background-color: white;
z-index: 1;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
z-index: 2;
}<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>SVG Header with Half Circle</title>
<div class = "header">
<div class = "line"></div>
<svg width = "10vw" height = "5vh" viewBox = "0 0 100 50" preserveAspectRatio = "xMidYMin meet" xmlns = "http://www.w3.org/2000/svg">
<path d = "M0,0 A50,50 0 0,0 100,0" fill = "none" stroke = "white" stroke-width = "3"/>
</svg>
</div>
Ответы 2
Почему бы не использовать SVG, содержащий закрашенный круг? Это должно замаскировать линию внизу.
Нарисуйте линию и полукруг за один раз. SVG имеет очень широкий viewBox = "0 0 10000 120", но с помощью preserveAspectRatio = "xMidYMid slice" отображается только средняя часть, всегда заполняя высоту заголовка и отсекая лишнюю длину по бокам.
Теперь вы рисуете длинную горизонтальную линию от левой стороны до середины окна просмотра за вычетом радиуса полукруга:
M 0,60 H 4950
добавьте полукруг (с помощью относительной команды конец полукруга можно записать как «100 вправо»)
a 50,50 0 0 0 100,0
и продолжаем горизонтальную линию вправо
H 10000
body {
margin: 0vh 0vw;
}
.header {
position: relative;
width: 100%;
height: 12vh;
background-color: #004d40;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
top: 0;
}
svg {
width: 100%;
height: 100%;
fill: none;
stroke: white;
stroke-width: 3;
}<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>SVG Header with Half Circle</title>
<div class = "header">
<svg viewBox = "0 0 10000 120" preserveAspectRatio = "xMidYMid slice">
<path d = "M 0,60 H 4950 a 50,50 0 0,0 100,0 H 10000"/>
</svg>
</div>Это был гораздо более эффективный способ сделать то, что я хотел, спасибо, это было очень информативно. @ccprog
в вашем образце кода нет пути клипа?