SVG 笔画,CSS 动画:并非所有笔画都向同一方向移动
SVG stroke, CSS animation: not all strokes moving in the same direction
下面的动画很简单,我是这么认为的。你会注意到其中一个笔划,而且只有一个,开始倒退。我不明白为什么会这样。
.container {
width: 350px;
height: 350px;
}
#path1 {
stroke-dasharray: 170;
animation: animate1 5s infinite linear forwards;
}
@keyframes animate1 {
50% {
stroke-dashoffset: -16.4%;
stroke-dasharray: 0 87.5%;
}
100% {
stroke-dashoffset: -100%;
stroke-dasharray: 170;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 1000 1000" xml:space="preserve">
<a xlink:href="#">
<path id="path2" fill="#000" d="M173,226h400v400H173V226z"/>
<path id="path1" fill="none" stroke="#000" d="M108,171h500v500H108V171z"/>
</a>
</svg>
</div>
感谢您的帮助,感谢任何指点。
路径的总长度 path1
是 2000 px
如果要得到4个等间隔的4段,那么一笔画的长度就等于总长度的八分之一:2000 / 8 = 250 px
在这种情况下,写 stroke-dasharray = "250, 250"
动画是通过将 stroke-dashoffset
从 2000px
减少到零
来实现的
.container {
width: 350px;
height: 350px;
}
#path1 {
stroke-dasharray: 250;
stroke-dashoffset:2000;
animation: animate1 5s infinite linear forwards;
}
@keyframes animate1 {
100% {
stroke-dashoffset: 0;
stroke-dasharray: 250;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 1000 1000" xml:space="preserve">
<a xlink:href="#">
<path id="path2" fill="#000" d="M173,226h400v400H173V226z"/>
<path id="path1" fill="none" stroke="#000" d="M108,171h500v500H108V171z"/>
</a>
</svg>
</div>
SVG解决方案
<style>
.container {
width: 350px;
height: 350px;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 1000 1000" xml:space="preserve">
<a xlink:href="#">
<path id="path2" fill="#000" d="M173,226h400v400H173V226z"/>
<path id="path1" fill="none" stroke="#000" stroke-dasharray="250,250" stroke-dashoffset="2000" d="M108,171h500v500H108V171z">
<animate
attributeName="stroke-dashoffset"
from="2000"
to="0"
dur="5s"
repeatCount="indefinite" />
</path>
</a>
</svg>
</div>
下面的动画很简单,我是这么认为的。你会注意到其中一个笔划,而且只有一个,开始倒退。我不明白为什么会这样。
.container {
width: 350px;
height: 350px;
}
#path1 {
stroke-dasharray: 170;
animation: animate1 5s infinite linear forwards;
}
@keyframes animate1 {
50% {
stroke-dashoffset: -16.4%;
stroke-dasharray: 0 87.5%;
}
100% {
stroke-dashoffset: -100%;
stroke-dasharray: 170;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 1000 1000" xml:space="preserve">
<a xlink:href="#">
<path id="path2" fill="#000" d="M173,226h400v400H173V226z"/>
<path id="path1" fill="none" stroke="#000" d="M108,171h500v500H108V171z"/>
</a>
</svg>
</div>
感谢您的帮助,感谢任何指点。
路径的总长度 path1
是 2000 px
如果要得到4个等间隔的4段,那么一笔画的长度就等于总长度的八分之一:2000 / 8 = 250 px
在这种情况下,写 stroke-dasharray = "250, 250"
动画是通过将 stroke-dashoffset
从 2000px
减少到零
.container {
width: 350px;
height: 350px;
}
#path1 {
stroke-dasharray: 250;
stroke-dashoffset:2000;
animation: animate1 5s infinite linear forwards;
}
@keyframes animate1 {
100% {
stroke-dashoffset: 0;
stroke-dasharray: 250;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 1000 1000" xml:space="preserve">
<a xlink:href="#">
<path id="path2" fill="#000" d="M173,226h400v400H173V226z"/>
<path id="path1" fill="none" stroke="#000" d="M108,171h500v500H108V171z"/>
</a>
</svg>
</div>
SVG解决方案
<style>
.container {
width: 350px;
height: 350px;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 1000 1000" xml:space="preserve">
<a xlink:href="#">
<path id="path2" fill="#000" d="M173,226h400v400H173V226z"/>
<path id="path1" fill="none" stroke="#000" stroke-dasharray="250,250" stroke-dashoffset="2000" d="M108,171h500v500H108V171z">
<animate
attributeName="stroke-dashoffset"
from="2000"
to="0"
dur="5s"
repeatCount="indefinite" />
</path>
</a>
</svg>
</div>