css - SVG 笔画、CSS 动画:并非所有笔画都朝同一个方向移动
问题描述
下面的动画非常简单,或者我是这么认为的。您会注意到其中一个笔画,而且只有一个,开始向后移动。我不明白为什么会这样。
.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
from减少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>
推荐阅读
- java - 为什么我的内部对象自定义验证器不用于验证?
- android - Why can kotlin coroutines operate UI elements on another thread
- c# - How to replace element in MeshRenderer.sharedMaterials
- mongodb - 使用带有 Mongo 连接器的 mapPartitions 时出现“IllegalStateException:状态应该是:打开”
- python - 我将如何改进我的模型,使其适用于更多不在数据集中的字符?
- javascript - 在pdfkit中将图像放在另一个上
- facebook - 无法通过 Facebook 应用审核 - 我该怎么办?
- go - 同步原语原子包
- node.js - csv-writer npm 默认值
- android - 为拇指使用自定义可绘制对象时如何保持切换拇指阴影/高度?