css - SVG CSS 多个动画
问题描述
我创建了一个藏宝图动画,首先,它将以浅灰色显示路径,但随着动画开始,我希望浅灰色的虚线消失或变成黑色,因为填充动画“.road”开始了。我是当填充动画越过该位置时,努力使浅灰色破折号“.steps”消失。
svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.road {
stroke-dasharray: 744;
stroke-dashoffset: -744;
animation: draw-road 10s infinite;
}
.steps {
stroke-dasharray: -744;
stroke-dashoffset: 744;
animation: draw-steps 10s reverse;
}
@keyframes draw-road {
0% {
stroke-dashoffset: 744;
stroke: #000000;
}
100% {
stroke-dashoffset: 0;
stroke: #000000;
}
}
@keyframes draw-steps {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<style>
.st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
</style>
<g id="Layer_1">
<path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
<path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" class="road" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073"/>
<path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
<path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073" class="steps"/>
<path class="st0" d="M273.84 65.49c1.64-.16 3.3-.32 4.98-.48"/>
<path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
</g>
</svg>
解决方案
使用 CSS 的解决方案
svg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.road{
fill:none;
stroke:black;
stroke-dasharray:10 10;
stroke-dashoffset:0;
stroke-width:2;
}
.steps{
fill:none;
stroke:#999;
stroke-dasharray:10 10;
stroke-dashoffset:0;
stroke-width:2;
mask:url(#msk1);
}
#stepMask{
fill:none;
stroke:black;
stroke-width:2;
stroke-dashoffset: 744;
stroke-dasharray:744,744;
animation: draw-steps 10s linear infinite;
}
@keyframes draw-steps {
100% {stroke-dashoffset:0;}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<style>
.st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
</style>
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="white" />
<path id="stepMask" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
</mask>
</defs>
<g id="Layer_1">
<path class="road" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
<path class="steps" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
<path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
</g>
</svg>
使用 SVG 蒙版的解决方案。
- 下面是一条黑线
class="road"
- 上面是一条灰线
class="steps"
- 将蒙版应用于灰线,当移动时,会擦除显示黑线的灰线
这会产生用黑色填充灰线的效果
svg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.road{
fill:none;
stroke:black;
stroke-dasharray:10 10;
stroke-dashoffset:0;
stroke-width:2;
}
.steps{
fill:none;
stroke:#999;
stroke-dasharray:10 10;
stroke-dashoffset:0;
stroke-width:2;
animation: draw-steps 10s reverse;
}
#stepMask{
fill:none;
stroke:black;
stroke-width:2;
stroke-dashoffset: 744;
stroke-dasharray:744,744;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<style>
.st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
</style>
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="white" />
<path id="stepMask" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" >
<animate attributeName="stroke-dashoffset" begin="0s" dur="20s" values="744;0;744" repeatCount="indefinite"/>
</path>
</mask>
</defs>
<g id="Layer_1">
<path class="road" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
<path class="steps" mask="url(#msk1)" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
<path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
</g>
</svg>
推荐阅读
- robotframework - Robotframework - 没有零填充十进制数字的月份中的哪一天
- tensorflow - 使用图形文件的 Tf 到 tflite 转换问题
- python-3.x - 如何在python中找到从给定节点到所有叶节点的路径
- python-3.x - 我的脚本被阻止抓取该网站(http:403),但不是我的浏览器
- computer-vision - 有没有办法通过 xamarin.forms 中的计算机视觉 API 从名片中获取姓名、电子邮件和电话号码
- hibernate - 将 jsp 连接到数据库 - DAO
- javascript - 如何使用javascript实时动态计算元素/类的长度......?
- java - 如何远程提交mapreduce作业
- javascript - 为什么使用 bin/www 而不是 index.js?
- cmake - 我可以使用 cmake-modules 文件夹而不在每个项目中设置 CMAKE_MODULES_PATH 吗?