无法在 Firefox 中运行 SVG 动画

Question

我在网上找到了这个 SVG 动画，它适用于 Chrome，但不适用于 Firefox。我找到了很多答案，添加了-webkit-，但仍然无法正常工作。我试图在 translateX() 中将百分比更改为像素，但没有。或者我做的不对。

https://codepen.io/anon/pen/MQRogz

HTML：

    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);
      }
    }

 <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>

Answer 1

解决方案 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>

Answer 2

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

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

为此：

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

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