编码的 svg 背景图像不会在 css 动画中正确无缝循环

Question

所以我在 heropatterns.com 上找到了一个 svg 图像图案，我想让那个图案沿着 x 轴无限移动。唯一的问题是，由于某种原因，有一个 break/gap 并且模式没有无缝循环。我正在使用平移、线性和无限属性，但它仍然显示出差距。

就好像图案只是在其容器内移动一样。有没有人有任何见解？这是 js fiddle I made

div.homehero-bg {
        background-color: #1de9b6;
        background-image:  url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2712%27%20viewBox%3D%270%200%2020%2012%27%3E%3Cstyle%20type%3D%27text%2Fcss%27%3E.st0%7Banimation%3Ashift%2012s%20linear%20infinite%3B%7D%40keyframes%20shift%20%7Bfrom%20%7Btransform%3AtranslateX%280%29%3B%7Dto%20%7Btransform%3AtranslateX%28-20px%29%3B%7D%7D%3C%2Fstyle%3E%3Cg%20fill-rule%3D%27evenodd%27%20class%3D%27st0%27%3E%3Cg%20id%3D%27charlie-brown%27%20%20fill%3D%27%23361900%27%20fill-opacity%3D%271%27%3E%3Cpath%20d%3D%27M9.8%2012L0%202.2V.8l10%2010%2010-10v1.4L10.2%2012h-.4zm-4%200L0%206.2V4.8L7.2%2012H5.8zm8.4%200L20%206.2V4.8L12.8%2012h1.4zM9.8%200l.2.2.2-.2h-.4zm-4%200L10%204.2%2014.2%200h-1.4L10%202.8%207.2%200H5.8z%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        background-size: 20px 12px;
        background-repeat: repeat;
        background-position: left top;

    }

这是解码后的 svg：

<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'>
<style type='text/css'>.st0{animation:shift 12s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}
</style>
<g fill-rule='evenodd' class='st0'>
  <g id='charlie-brown'  fill='#361900' fill-opacity='1'>
    <path d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/>
  </g>
</g>
</svg>

*注：我最初的灵感来自于此codepen。

Answer 1

最好再做一个动画。不在 svg 但在 css:

.homehero-bg {
  height: 400px;
  width: 400px;
  background-color: #1de9b6;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2012%22%3E%3Cpath%20fill%3D%22%23361900%22%20fill-rule%3D%22evenodd%22%20d%3D%22M9.8%2012L0%202.2V.8l10%2010%2010-10v1.4L10.2%2012h-.4zm-4%200L0%206.2V4.8L7.2%2012H5.8zm8.4%200L20%206.2V4.8L12.8%2012h1.4zM9.8%200l.2.2.2-.2h-.4zm-4%200L10%204.2%2014.2%200h-1.4L10%202.8%207.2%200H5.8z%22/%3E%3C/svg%3E");
  background-size: 20px 12px;
  background-repeat: repeat;
  background-position: 0 0;
  animation: shift 12s linear infinite;
}

@keyframes shift {
  to {
    background-position:100% 0;
  }
}

<div class="homehero-bg">

</div>

编码的 svg 背景图像不会在 css 动画中正确无缝循环

encoded svg background image won't seamlessly loop in css animation correctly

css

animation

svg

keyframe

css-animations