svg
笔画动画从右边开始,但是我想从左到右抚摸那个动画形式。动画后中风仍然有效。可以在动画期间添加任何动画css类,如fadeIn
.cls-1 {
fill: none;
stroke: #00a139;
stroke-miterlimit: 10;
}
svg {
width: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
background: #1e1e1e;
}
#Path_70 {
stroke-dasharray: 1800;
stroke-dashoffset: 1800;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="2080.831 303.745 1673.195 406.547">
<defs>
</defs>
<g id="Group_191" data-name="Group 191" transform="translate(2393 93)">
<path id="Path_70" data-name="Path 70" class="cls-1" d="M1700.935,169.155s-227.809,11.434-421.654,140.759c-174.322,116.314-275.519,110.6-373.713,41.794C786.235,268.022,551.495-57.262,63.3,9.47" transform="translate(-361.422 210.687)"/>
</g>
</svg>
答案 0 :(得分:1)
您可以将stroke-dashoffset
设为负值:
.cls-1 {
fill: none;
stroke: #00a139;
stroke-miterlimit: 10;
}
svg {
width: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
background: #1e1e1e;
}
#Path_70 {
stroke-dasharray: 1800;
stroke-dashoffset: -1800;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
&#13;
<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="2080.831 303.745 1673.195 406.547">
<defs>
</defs>
<g id="Group_191" data-name="Group 191" transform="translate(2393 93)">
<path id="Path_70" data-name="Path 70" class="cls-1" d="M1700.935,169.155s-227.809,11.434-421.654,140.759c-174.322,116.314-275.519,110.6-373.713,41.794C786.235,268.022,551.495-57.262,63.3,9.47" transform="translate(-361.422 210.687)"/>
</g>
</svg>
&#13;