How can I fix SVG text-overlap?

Question

Hello guys I'm new to SVG, I already searched many times for this problem but the solution doesn't work, how can you put some text inside of it, my text element got overlapped by my circle svg. I have also another idea that I'll edit the svg and put some text in adobe illustrator but I want a button inside of it.

P.S. Sorry for my bad grammar

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
header {
  height: 100vh;
  width: 100%;
}
.svg-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 80%;
  width: 100%;
  flex-direction: column;
  background-color: blue;
}

<div class="svg-container">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1093.75 634.38">
      <defs>
         <style>
            .cls-1,
            .cls-2,
            .cls-3,
            .cls-4 {
            fill: #e6e7e8;
              stroke-miterlimit: 10;
            }
            .cls-1 {
              stroke: #e6e6e6;
              stroke-linecap: round;
            }
            .cls-2 {
              stroke: #ccc;
            }
            .cls-3 {
              stroke: #b3b3b3;
            }
            .cls-4 {
              stroke: #999;
            }
         </style>
      </defs>
      <title>Circles</title>
      <g id="Circle4">
         <text x="100"
               y="50"
               font-family="Verdana"
               font-size="35"
               fill="red">
            Hello
         </text>
         <circle class="cls-1" cx="997.99" cy="538.62" r="90.18" />
      </g>
      <g id="Circle3">
         <circle class="cls-2" cx="806.72" cy="457.71" r="149.49" />
      </g>
      <g id="Circle2">
         <circle class="cls-3"
                 cx="529.65"
                 cy="374.1"
                 r="189.38"
                 transform="translate(-109.39 484.09) rotate(-45)" />
      </g>
      <g id="Circle1">
         <circle class="cls-4" cx="260.7" cy="264.41" r="253.75" />
      </g>
   </svg>
</div>

Answer 1

You need to reorder your elements and place the text at the end.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  height: 100vh;
  width: 100%;
}

.svg-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 80%;
  width: 100%;
  flex-direction: column;
  background-color: blue;
}

<div class="svg-container">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1093.75 634.38">
      <defs>
         <style>
            .cls-1,
            .cls-2,
            .cls-3,
            .cls-4 {
            fill: #e6e7e8;
              stroke-miterlimit: 10;
            }
            .cls-1 {
              stroke: #e6e6e6;
              stroke-linecap: round;
            }
            .cls-2 {
              stroke: #ccc;
            }
            .cls-3 {
              stroke: #b3b3b3;
            }
            .cls-4 {
              stroke: #999;
            }
         </style>
      </defs>
      <title>Circles</title>
      <g id="Circle4">
         <circle class="cls-1" cx="997.99" cy="538.62" r="90.18" />
      </g>
      <g id="Circle3">
         <circle class="cls-2" cx="806.72" cy="457.71" r="149.49" />
      </g>
      <g id="Circle2">
         <circle class="cls-3"
                 cx="529.65"
                 cy="374.1"
                 r="189.38"
                 transform="translate(-109.39 484.09) rotate(-45)" />
      </g>
      <g id="Circle1">
         <circle class="cls-4" cx="260.7" cy="264.41" r="253.75" />
      </g>
      <text x="100"
            y="50"
            font-family="Verdana"
            font-size="35"
            fill="red">
         Hello
      </text>
   </svg>
</div>