需要了解为什么SVG不根据其内容调整大小

Answer 1

要么给 SVG 元素一个 viewBox 属性：

svg {
  border: solid red thin;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40">
  <g>
    <circle cx="10" cy="15" r="3"></circle>
    <text x="20" y="18">My</text>
  </g>
  <line x1="10" y1="15" x2="10" y2="35" stroke="black"></line>
</svg>

或者给 SVG 元素一个宽度和高度：

svg {
  border: solid red thin;
}

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="40">
  <g>
    <circle cx="10" cy="15" r="3"></circle>
    <text x="20" y="18">My</text>
  </g>
  <line x1="10" y1="15" x2="10" y2="35" stroke="black"></line>
</svg>