我使用 CSS3 为 SVG 创建了一段动画,它在 Chrome 和 Firefox 中运行得非常完美。在 Safari 中它只能部分工作,在支持 CSS 动画的 Internet Explorer(IE9+)中则无法工作。
CSS:
@-webkit-keyframes dash {
70%,80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
85% {
fill-opacity: 0;
stroke-opacity: 1;
}
95% {
stroke: #17739D;
stroke-dashoffset: -301;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: -301;
}
}
@-ms-keyframes dash {
70%,80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
85% {
fill-opacity: 0;
stroke-opacity: 1;
}
95% {
stroke: #17739D;
stroke-dashoffset: -301;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: -301;
}
}
@-moz-keyframes dash {
70%,80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
85% {
fill-opacity: 0;
stroke-opacity: 1;
}
95% {
stroke: #17739D;
stroke-dashoffset: -301;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: -301;
}
}
@keyframes dash {
70%,80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
85% {
fill-opacity: 0;
stroke-opacity: 1;
}
95% {
stroke: #17739D;
stroke-dashoffset: -301;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: -301;
}
}
#Layer_1 {
margin-left: auto;
margin-right : auto;
top: 50%;
position: absolute;
left: 50%;
margin-left: -65px;
margin-top: -35px;
}
svg {
background: #fff;
display: block;
}
svg * {
stroke: #666;
#stroke: #17739D;
stroke-width: 1;
fill-opacity: 0;
stroke-dasharray: 350;
stroke-dashoffset: 440;
}
svg #bp_svg * {
-webkit-animation-name : dash;
-moz-animation-name : dash;
-ms-animation-name : dash;
animation-name : dash;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function : linear;
-moz-animation-timing-function : linear;
-ms-animation-timing-function : linear;
animation-timing-function : linear;
-webkit-animation-fill-mode : forwards;
-moz-animation-fill-mode : forwards;
-ms-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}
有人能帮我解决在Safari和IE上使其正常工作的问题吗?
svg *
中的fill-opacity
。请查看此示例。 - Rohith