如何在Firefox中使SVG剪辑路径动画兼容

时间:2017-01-30 15:09:05

标签: firefox animation svg cross-browser clip-path

我设法使用SVG剪辑路径和CSS在Google Chrome,Opera和Safari中正常运行来创建SVG动画。但是,在Firefox中,剪辑了SVG,但似乎没有应用动画的CSS代码。

在其他浏览器上,有一个3秒的初始延迟,然后剪辑路径向上扩展以逐渐显示整个图像。有谁知道为什么我不能让这个代码在Firefox上运行?

或者,有没有办法确保整个图像显示在不支持动画的浏览器中?

body {
  margin: 0;
}
img, svg {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

#carClip {
-ms-transform: scale(0.5) translate(1950px,380px); /* IE 9 */
-webkit-transform: scale(0.5) translate(1950px,380px); /* Safari and Chrome */
-o-transform: scale(0.5) translate(1950px,380px); /* Opera */
-moz-transform: scale(0.5) translate(1950px,380px); /* Firefox */
transform: scale(0.5) translate(1950px,380px);
}

.container {
  max-width: 100%;
  width: 100%;
  overflow:hidden;
  background-color: rgb(108,110,112);
}

.clip-shape {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -o-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 50% 50%; 
  -moz-transform-origin: center center; 
  -o-transform-origin: 50% 50%; 
  -ms-transform-origin: 50% 50%; 
  transform-origin: center center;  
  -webkit-animation: scale 18s forwards 1;
  -moz-animation: scale 18s forwards 1;
  -o-animation: scale 18s forwards 1;
  -ms-animation: scale 18s forwards 1;
  animation: scale 18s forwards 1;  
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}

@-webkit-keyframes scale {
  0% { -webkit-transform: scale(0.5); }
  100% { -webkit-transform: scale(11); }
}

@-o-keyframes scale {
  0% { -o-transform: scale(0.5); }
  100% { -o-transform: scale(11); }
}

@-moz-keyframes scale {
  0% { -moz-transform: scale(0.5); }
  100% { -moz-transform: scale(11); }
}

@-ms-keyframes scale {
  0% { -ms-transform: scale(0.5); }
  100% { -ms-transform: scale(11); }
}

@keyframes scale {
  0% { transform: scale(0.5); }
  100% { transform: scale(11); }
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="auto" viewBox="0 0 1809 692">
	<defs>
    <clipPath id="carClip">
    <polygon class="clip-shape" fill="none" id="thePath" points="174 75 542 0 669 363 396 546 0 324 174 75"></polygon>
      </clipPath>
	</defs>
	<image clip-path="url(#carClip)" width="1809" height="692" xlink:href="http://dev.lexuspreciousmetal.tsadvertising.co.uk/wp-content/themes/lexus/images/banner.png" ></image>
</svg>
</div>

0 个答案:

没有答案