Search code examples
htmlcsssvg

Problem removing part of svg element that intersects line

I tried to remove the intersection of the base of the semicircle and the line by using clip-path in .line, but it did not work. Is this the correct method or is there another way?

I tried to remove the intersection of the base of the semicircle and the line by using clip-path in .line, but it did not work. Is this the correct method or is there another way? How can we solve this problem? How can we remove the part mentioned in the image?

enter image description here

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>

Solution

  • Draw the line and the half circle in one go. The SVG gets a very wide viewBox="0 0 10000 120", but with preserveAspectRatio="xMidYMid slice" only the middle part is shown, always filling the height of the header, and cutting off the superfluous length at the sides.

    Now you draw a long horizontal line from the left side to the middle of the viewbox minus the radius of the half circle:

    M 0,60 H 4950

    add the half circle (with a relative comand, the end of the half circle can be written as "100 to the right")

    a 50,50 0 0 0 100,0

    and continue the horizontal line to the right side

    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>