如何实现SVG在容器内裁剪（类似div的overflow:none效果）

要让SVG在容器内实现类似overflow:hidden的裁剪效果，这里有两种实用方法，适配不同场景：

方法一：给容器添加定位与overflow:hidden（最简便） #

因为你的SVG使用了绝对定位，需要先让容器成为它的定位参考，再开启溢出裁剪：

1. 给#svg_container添加position: relative，让SVG相对该容器定位
2. 给#svg_container添加overflow: hidden，自动裁剪超出容器的SVG部分

修改后的CSS代码：

#text {border:1px solid green;}
#svg_container {
  height: 50px;
  border:1px solid red;
  position: relative; /* 让SVG相对容器定位 */
  overflow: hidden; /* 裁剪超出部分 */
}
svg {
  position: absolute;
  top: -40px;
  left: -65px;
}

HTML无需修改，这样蓝色圆圈就只会显示在红色矩形容器内部了。

方法二：使用SVG内置clipPath（适合复杂/非矩形裁剪） #

如果你的容器不是矩形，或者需要对复杂SVG元素做精细裁剪，可以用SVG的<clipPath>定义裁剪区域：

修改后的HTML代码（SVG部分）：

<div id="svg_container">
  <svg viewbox="-3 -3 9 9" width="180px">
    <!-- 定义裁剪路径 -->
    <defs>
      <clipPath id="containerClip">
        <!-- 矩形尺寸匹配容器可视区域，可根据需求改成其他形状 -->
        <rect x="0" y="0" width="180" height="50" />
      </clipPath>
    </defs>
    <!-- 给需要裁剪的元素（或外层<g>）应用裁剪路径 -->
    <circle fill="darkblue" cx="3" cy="3" r="3" clip-path="url(#containerClip)" />
  </svg>
</div>

这种方法支持自定义裁剪形状（如圆形、多边形），适合复杂SVG的局部裁剪需求。

内容的提问来源于stack exchange，提问作者lmat - Reinstate Monica