css – SVG进度条

我有一个要求，我需要动态加载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>