我有一个需求,需要动态加载js文件,并通过SVG图标显示加载文件的进度。SVG图标将作为进度条,从底部到顶部线性填充颜色。
Here is the codepen
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<path fill="transparent" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</svg>
我计划使这个图标独立,只传递百分比值。 我设法完成了动画,但无法保留SVG的边框或轮廓线。 这是代码。
#progressMove {
transition: .3s y;
}
#progressMove:hover {
y: 60%;
}
<svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<defs>
<mask id="bubbleKenseo">
<path fill="red" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</mask>
</defs>
<g x="0" y="0" width="79.36px" height="93.844px" mask="url(#bubbleKenseo)" height="100">
<rect id="progressMove" x="0" y="0%" width="100%" height="100%" fill="blue" stroke="black" />
</g>
</svg>
所以,我遇到的问题是:
- 无法保持SVG边框
- 无论我添加什么颜色都有一定的透明度,我无法去除。
- 编辑:浏览器兼容性:IE11+,Chrome,Safari和Firefox
PS:我不想使用SMIL动画。