我有一个要求，我需要动态加载js文件，并显示通过SVG图标加载文件的进度。 SVG图标将作为进度条，从底部到顶部以线性方式填充颜色。
这是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,50,2z" /> </svg>
我打算使这个图标独立，这样我只会动态地传递百分比值。
我以某种方式能够完成动画，但无法保持svg的边框或轮廓。这是code。
#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,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动画。
解决方法
首先，您要使用
clip-path，或将蒙版填充设置为白色以获得100％不透明度：掩模用作灰度Alpha通道，红色填充颜色会导致不透明度更改。
对于笔画，您要将其添加为不受剪辑影响的单独元素。 (你可以重新使用defs和使用的路径，我只是复制粘贴在这里)
#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> <clipPath id="bubbleKenSEO"> <path d="M50,2z" /> </clipPath> </defs> <path stroke="black" stroke-width="1" fill="transparent" d="M50,2z" /> <g x="0" y="0" width="79.36px" height="93.844px" clip-path="url(#bubbleKenSEO)" height="100"> <rect id="progressMove" x="0" y="0%" width="100%" height="100%" fill="blue" stroke="black" /> </g> </svg>
