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,8,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,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动画。

最佳答案

首先，您想使用clip-path，或将mask填充设置为白色以实现100％不透明度:mask用作灰度Alpha通道，红色填充颜色会导致不透明度发生变化。

至于笔划，您想将其添加为不受剪裁影响的单独元素。 (您可能可以使用defs和use重用该路径，我只是在此处复制粘贴了它)

#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,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" />
    </clipPath>
  </defs>
  <path stroke="black" stroke-width="1" fill="transparent" 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" />
  <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>

关于css - SVG进度条，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38437325/