如何基于Div尺寸隐藏SVG边缘？求CSS实现SVG遮罩的方法

要让Div容器内的SVG超出部分被隐藏，最直接的方案就是给容器添加overflow: hidden属性，下面结合你的代码给出具体调整方式：

修改你的CSS代码 #

你的.clock类应该就是那个包含SVG的Div容器，只需要在它的CSS规则里新增一行：

.clock {
  color: #fff;
  background-repeat: no-repeat;
  left: -114px;
  top: 112px;
  width: 67%;
  height: 68%;
  position: absolute;
  /* 新增：隐藏超出容器范围的内容 */
  overflow: hidden;
}

原理说明 #

overflow: hidden是CSS专门用来处理容器内容溢出的属性，当容器内的元素尺寸超过容器自身的宽高时，浏览器会自动裁剪掉超出容器边界的部分，完全符合你需要的遮罩效果。

几个需要注意的细节 #

• 必须保证容器（也就是你的.clock元素）有明确的width和height值——你已经设置了百分比宽高，这没问题，只要容器的父元素也有确定的尺寸，百分比就能正常计算。
• 不管你的SVG有没有设置position或者其他布局属性，只要它是这个Div容器的子元素，overflow: hidden都会对它生效，不用担心脱离文档流的问题。

内容的提问来源于stack exchange，提问作者daniel ziv