如何修复SVG文本重叠？

问题描述

大家好，我是SVG的新手，我已经搜索了很多次此问题，但是解决方案不起作用，如何在其中添加一些文本，我的文本元素被圆圈svg覆盖。我还有另一个想法，我将编辑svg并将一些文本放入Adobe illustrator中，但是我想在其中添加一个按钮。

P.S。对不起，我的语法不好

* {
  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>

解决方法

您需要重新排列元素并将text放在最后。

* {
  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>