Question

我在网上找到了这个SVG动画，它可以在Chrome中使用，但在Firefox中却不行。我找到了很多答案，添加了-webkit-，但仍然没有用。我试图将百分比更改为translateX（）中的像素，但没有。或许我做得不对。

HTML：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
  <defs>    
    <clipPath id="clip-path">
      <rect id="rect" x="0" y="0" height="346" width="250"/>
    </clipPath>
  </defs>

  <path fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
  <path clip-path="url(#clip-path)" fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>  
</svg>

CSS：

body {
  background: #333;
  padding: 2em;
}

svg {
  display: block;
  left: 50%;
  max-width: 8em;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
}

#rect {
  animation: slideOver 5s linear infinite;
}

@-webkit-keyframes slideOver {
  0% {
    -webkit-transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(100%);
  }
  50% {
    -webkit-transform: translateX(100%);
  }
  75% {
    -webkit-transform: translateX(0);
  }
}

@keyframes slideOver {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(100%);
  }
  75% {
    transform: translateX(0);
  }
}

Answer 1

将动画分配给要动画的元素，而不是已使用的元素。改变这个：

#rect {
  animation: slideOver 5s linear infinite;
}

为此：

path:nth-child(2) {
  animation: slideOver 5s linear infinite;
}

将选择器更改为您需要的任何内容。

Answer 2

解决方案SVG

通过在同一个白色十字架上放置黑色十字并使用移动clipPath到黑色十字架来实现动画。

作为clipPath的形状轮廓，使用矩形，通过动画命令从最左侧位置移动到最右侧位置。切掉黑十字的部分，从而显示位于黑十字下方的白色十字。

通过重复属性的相同数字来实现极端位置的暂停：
values = - 250; 0; 0; -250; -250

body {
  background: #333;
  padding: 2em;
}

svg {
  display: block;
  left: 50%;
  max-width: 8em;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
  <defs>    
    <clipPath id="clip-path1">
      <rect id="shadow" x="-250" y="-1" width="250" height="347"  >
	   <animate attributeName="x" dur="4s" begin="0s" values="-250;0;0;-250;-250" repeatCount="indefinite" />
      </rect> 
	</clipPath> 
  </defs>
    
  <!--  White cross -->
   <path  fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>   
 <!-- black cross along with the use of `clipPath`  -->
 <path clip-path="url(#clip-path1)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/> 
 </svg>

无法在firefox中运行SVG动画

2 个答案: