我设法使用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>