我正在尝试创建一个svg路径的动画,并且在chrome / firefox上工作得很好但是在边缘/ IE上却没有。
代码如下:
.pathNivel1, .pathNivel2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-ms-transform: dash 2s forwards infinite;
animation: dash 2s forwards infinite;
}
@-ms-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.cls-2, .cls-3, .cls-4, .cls-7, .cls-8 {
fill: none;
}
.cls-2 {
stroke: #497faa;
}
.cls-3 {
stroke: #69c;
}
.cls-2, .cls-3, .cls-4, .cls-8 {
stroke-linecap: round;
stroke-linejoin: round;
}
.cls-2, .cls-3, .cls-4 {
stroke-width: 65px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="470.85">
<g>
<path class="cls-3 pathNivel2" d="m39.200012,153.566565a82.68,82.68 0 0 1 82.67,82.68" />
</g>
</svg>
有什么问题或缺失?
THX,
祝你好运
............................................... ............................
答案 0 :(得分:1)
我在css-tricks上找到了关于Amelia BR评论的解决方案。
.path {
stroke-dasharray: 0 1000;
/*stroke-dashoffset: 1000; /* NOT NEEDED */
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dasharray: 0 1000; /* zero-length stroke,
1000-length gap */
}
to {
stroke-dasharray: 1000 0;/* 1000-length stroke,
zero-length gap */
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>