css - 如何为要填充的多边形 SVG 设置动画?
问题描述
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.0" id="layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="190px" height="115px"
viewBox="0 0 190 115" enable-background="new 0 0 190 115" xml:space="preserve">
<polygon fill="#FFE033" points="180,22.5 10,22.5 10,0 0,0 0,22.5 0,32.5 10,32.5 180,32.5 180,52.5 10,52.5 0,52.5 0,62.5
0,82.5 0,92.5 10,92.5 180,92.5 180,114.999 190,114.999 190,92.5 190,82.5 180,82.5 10,82.5 10,62.5 180,62.5 190,62.5 190,52.5
190,32.5 190,22.5"/>
</svg>
使用这个 svg,我尝试做一个像梯子一样下降的动画。你如何使用css实现它?
我是一个超级初学者...
解决方案
您可以简化SVG
使用 apath
而不是多边形并在stroke-dasharray
属性上运行 CSS 动画
svg {
stroke: #ffe033;
stroke-width: 10px;
fill: none;
width: 190px;
height: 115px;
stroke-dasharray: 0 660;
animation: stroke 5s linear 0s 1 forwards;
}
@keyframes stroke {
to { stroke-dasharray: 660 660; }
}
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 190 115">
<path d="M5 0v30H185v30H5v30H185v30" />
</svg>
推荐阅读
- elasticsearch - 复杂多边形中点(地理点)的弹性kibana选择
- android - 如何摆脱手机上所有可能的网站数据
- r - 有没有办法将电子表格中的问题和答案导入到学习者测验中?
- unreal-engine4 - 如何创建具有基色层的材质?
- javascript - 通过 API 删除 Imgbb 中的图像
- r - 安装 RQDA 时出错:无法访问存储库 NA/src/contrib 的索引:
- android - 通过将值设置为自身来调用 onDataChange()?火力基地
- rust - 无法在带有字符串的结构上复制,那么我该如何解决这个问题?
- android - Android导航 - 隐藏加载/启动屏幕的操作栏?
- knockout.js - 从子更改触发父 ViewModel 事件