SVG的动画与clipPath产生的一个1px的问题

近期开发的时候遇到一个这么简单的问题：svg的clipPath与移动动画一起使用，元素移动时会在其所在组(g标签)的clipPath外面出现一个1px的边框，非常难看，如图：

过程

如是来还原这个bug，首先创建一个很简单的svg，中间放一个圆作为动画元素、一个菱形作为修剪路径(clip-path)。这里还添加了一个一模一样菱形作为背景以展示修剪路径

<svg class="svg-root" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <clipPath id="cp">
    <polygon points="14,50,50,23,86,50,50,77"></polygon>
  </clipPath>
  <polygon fill="#000" points="14,50,50,23,86,50,50,77"></polygon>
  <g class="center-group" clip-path="url(#cp)">
    <circle class="center-circle" fill="orange" cx="50" cy="50" r="20"></circle>
  </g>
</svg>

首先仅仅让圆发生简单的平移，可以发现其与修剪路径没有任何不兼容。

1
2
3

.center-circle {
  transform: translate(-20px, -20px);
}

然后让中间的圆动起来，选择一个简单的css平移动画即可

@keyframes centerAnimation {
  from {
    transform: translate(-20px,-20px);
  }
  to {
    transform: translate(20px,20px);
  }
}
.center-circle {
  animation: centerAnimation .8s linear infinite alternate-reverse;
}