css – SVG进度条

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/css/218212.html

猜你在找的CSS相关文章