如何通过原生SVG语法或CSS修复SVG图形边缘被裁剪的问题

你的SVG出现边缘裁剪主要有两点诱因：

1. 内部<text>元素绑定了上下偏移量各10px的位移动画，文本向上移动时会超出当前viewBox="0 0 500 500"的顶部可视范围，被SVG默认的隐藏溢出属性裁剪
2. 对应版本Chrome对SVG内部带clip-path的元素渲染时，存在亚像素边缘裁剪的bug，动画触发的频繁重绘会放大这个异常

方案1：修改SVG原生属性（推荐） #

调整viewBox给动画预留足够空间，同时给裁剪路径加微小余量避免亚像素裁剪，该方案兼容性最好，不会出现内容溢出影响页面其他元素的问题：

<!-- viewBox修改为0 -20 500 520：顶部预留20px空间适配上下移动的动画，总高度增加20px保证比例正常 -->
<svg id="profile-pic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -20 500 520">
  <title>Brandon McConnell</title>
<defs>
  <!-- clipPath的半径从116调整为116.5，增加0.5px余量解决亚像素边缘裁剪问题 -->
  <clipPath id="imageClipPath"><circle cx="250" cy="250" r="116.5" fill="#FFFFFF" /></clipPath>
</defs>
    <text dy="70" textLength="500">Lorem Ipsum</text>
    <image
    href="https://s.gravatar.com/avatar/6e25e38e140dda7ac64f7865b3df77ab?s=500"
    clip-path="url(#imageClipPath)"
    width="240"
    height="240"
         x="130"
         y="130"
  />
</svg>

方案2：通过CSS样式修复 #

直接修改SVG的溢出规则，同时给动画元素添加分层渲染属性避免渲染异常：

#profile-pic {
  width: 33%;
  overflow: visible; /* 允许SVG内容超出viewBox范围显示 */
}
#profile-pic text {
  font-size: 48px;
  font-family: monospace;
  font-weight: bold;
  fill: #000;
  -webkit-animation: raise 1s linear infinite alternate;
          animation: raise 1s linear infinite alternate;
  transform: translateZ(0); /* 触发GPU分层渲染，减少动画过程中的边缘裁剪问题 */
}

如果修改后仍存在圆形头像边缘裁剪问题，可额外将clipPath的半径调大0.5px即可解决。

内容的提问来源于stack exchange，提问作者Brandon McConnell