SVG在Webkit浏览器上留下“跟踪”

Question

我试图在我的项目中使用以下SVG动画：https://codepen.io/ChipD/pen/KoXzda

CSS和：

​

/* Housekeeping CSS */
body {
  background: #272822 !important;
}

.loader-container {
  margin:auto;
  margin-top:25vh;
  overflow:hidden;
}

/* 
Hiding the rect on page load 
And add the "expand" animation
*/
rect {
  opacity:0;
  animation: expand 0.2s forwards;
}
/* End of housekeeping css */xs

/* Delays to subsequent "dashes" */
#line1 #dash-2 {
  animation-delay:0.1s;
}

#line1 #dash-3 {
  animation-delay:0.2s;
}

#line1 #dash-4 {
  animation-delay:0.3s;
}

#line2 #dash-1 {
  animation-delay:0.4s;
}

#line2 #dash-2 {
  animation-delay:0.5s;
}

#line2 #dash-3 {
  animation-delay:0.6s;
}

#line3 {
  animation-delay:0.7s;
}

#line4 {
  animation-delay:.8s;
}

#line5 {
  animation-delay:0.9s;
}

#line6 {
  animation-delay:1s;
}

@keyframes expand {
  0% { opacity: 1; width: 0}
  100% { opacity: 1; width: 1 }
}

#group1 {
  animation: scroll 1s linear infinite;
  animation-delay: 1s;
}

@keyframes scroll {
  0% {transform: translateY(initial)}
  100% {transform: translateY(-165px)}
}

#group2 {
  transform: translateY(165px);
  animation: scroll2 1s linear infinite;
  animation-delay: 1s
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-xs-12 text-center loader-container">
    <?xml version="1.0" encoding="UTF-8"?>
      <?xml version="1.0" encoding="UTF-8"?>
<svg width="400px" height="165px" viewBox="0 0 400 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
    <title>Artboard</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="coding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard">
            <g id="group1">
                <g id="line1">
                    <rect id="dash-1" fill="#F92672" x="0" y="0" width="40" height="20" rx="10"></rect>
                    <rect id="dash-2" fill="#A6E22E" x="43" y="0" width="60" height="20" rx="10"></rect>
                    <rect id="dash-3" fill="#FFE792" x="106" y="0" width="100" height="20" rx="10"></rect>
                    <rect id="dash-4" fill="#FFE792" x="209" y="0" width="70" height="20" rx="10"></rect>
                </g>
                <g id="line2" transform="translate(30.000000, 27.000000)">
                    <rect id="dash-1" fill="#F92672" x="0" y="0" width="40" height="20" rx="10"></rect>
                    <rect id="dash-2" fill="#A6E22E" x="43" y="0" width="60" height="20" rx="10"></rect>
                    <rect id="dash-3" fill="#FFE792" x="106" y="0" width="80" height="20" rx="10"></rect>
                </g>
                <rect id="line6" fill="#F92672" x="0" y="135" width="40" height="20" rx="10"></rect>
                <rect id="line3" fill="#F8F8F2" x="60" y="54" width="290" height="20" rx="10"></rect>
                <rect id="line4" fill="#F8F8F2" x="60" y="81" width="225" height="20" rx="10"></rect>
                <rect id="line5" fill="#F92672" x="30" y="108" width="40" height="20" rx="10"></rect>
            </g>
          <g id="group2">
                <g id="line1">
                    <rect id="dash-1" fill="#F92672" x="0" y="0" width="40" height="20" rx="10"></rect>
                    <rect id="dash-2" fill="#A6E22E" x="43" y="0" width="60" height="20" rx="10"></rect>
                    <rect id="dash-3" fill="#FFE792" x="106" y="0" width="100" height="20" rx="10"></rect>
                    <rect id="dash-4" fill="#FFE792" x="209" y="0" width="70" height="20" rx="10"></rect>
                </g>
                <g id="line2" transform="translate(30.000000, 27.000000)">
                    <rect id="dash-1" fill="#F92672" x="0" y="0" width="40" height="20" rx="10"></rect>
                    <rect id="dash-2" fill="#A6E22E" x="43" y="0" width="60" height="20" rx="10"></rect>
                    <rect id="dash-3" fill="#FFE792" x="106" y="0" width="80" height="20" rx="10"></rect>
                </g>
                <rect id="line6" fill="#F92672" x="0" y="135" width="40" height="20" rx="10"></rect>
                <rect id="line3" fill="#F8F8F2" x="60" y="54" width="290" height="20" rx="10"></rect>
                <rect id="line4" fill="#F8F8F2" x="60" y="81" width="225" height="20" rx="10"></rect>
                <rect id="line5" fill="#F92672" x="30" y="108" width="40" height="20" rx="10"></rect>
            </g>
        </g>
    </g>
</svg>
  </div>
</div>

​

我的实际项目：https://cryptodescriptor.github.io/portfolio/

问题：下面是这个问题的图片

从上面的图片看可能很难分辨。但是，如果您转到任何Webkit浏览器上的代码页或github.io链接，您将看到轻微的颜色跟踪(主要发生在SVG的边缘)。

想知道有什么可行的解决办法吗？

Answer 1

通过重写整个CSS代码以使用掩码而不是矩形宽度转换来修正它，以及删除"group2“上的任何定时偏移。