带有图像和圆形进度条的圆形按钮

Posted 2023-02-16

【中文标题】带有图像和圆形进度条的圆形按钮

【英文标题】：Circular button with image and circular progress bar

【发布时间】：2019-12-28 19:29:53

【问题描述】：

我正在尝试制作一个按钮，里面有一个图像，外面有一个圆形进度条，按下按钮后是彩色的。

我有一个 .svg 图像，它必须显示在一个直径为 140 像素的圆圈中。此图片必须是触发请求并激活其圆周上的进度条的按钮。

我正在寻找一个不使用复杂库（最多 jquery）的简单示例。

我尝试在 html 中使用 svg，但我不知道如何将其变成按钮并激活进度条或清理它。我也无法正确调整它的大小。

<svg  >
    <image x="0%" y="0%"   xlink:href="images/small-gate.svg"></image>
    <circle cx="50" cy="50" r="40" stroke="#428bca" stroke- fill="url(#image)" />
</svg>

我想创建类似示例的内容，但不是“暂停”（两个破折号），而是我的 .svg 图像。

示例：

【问题讨论】：

我猜你必须更改图像元素上的 ref

【参考方案1】：

这里有一个准系统方法：

window.addEventListener("load", addImgButton);
function addImgButton()
  var element = document.getElementById("mybutton");
      element.addEventListener("click", toggleAnim);  


function toggleAnim()
  var element = document.getElementById("pbar");
      element.classList.toggle("showAnim");

:root
  --perc: 65;
  --sw: 6;
  --atime: 2s;
  --pi2: 6.28318;
  --r: 40;
  --perim: calc(var(--pi2) * var(--r));
  --pend: calc(var(--r) * var(--pi2) * var(--perc) / 100);
  --prest: calc(var(--r) * var(--pi2) * (100 - var(--perc)) / 100);

#progress
  stroke: #aaa; /* #428bca; */
  stroke-width: var(--sw);

#pbar
  stroke-width: var(--sw);
  fill: none;


.showAnim
  stroke: #428bca;
  stroke-dasharray: var(--pend) var(--prest);
  animation: progress var(--atime) ease-out forwards;


@keyframes progress 
  0% 
    stroke-dasharray: 0 1000;
  

<svg  >
  <defs>
    <clipPath id="cFrame">
      <circle cx="50" cy="50" r="40" />
    </clipPath>
  </defs>
    <image id="mybutton" x="0" y="0%"   xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/dc/Melithreptus_lunatus.jpg" clip-path="url(#cFrame)"></image>
    <circle id="progress" cx="50" cy="50" r="40" fill="url(#image)" />
  <circle id="pbar" cx="50" cy="50" r="40" />
</svg>

它使用 CSS 动画和纯 javascript 进行触发。动画进度背后的简单想法是您可以使用stroke-dasharray 属性来显示弧线。唯一的技巧是正确设置开始和结束值。 关于内部图像，应该很简单：设置图片的坐标和比例（我还添加了一个剪辑，只显示在圆圈内）并使用它的id 或class 添加一个click事件监听器。几点：

您可以在css 部分的开头自定义进度。变量--perc 包含弧的最终百分比。变量--atime 控制动画时间。变量--r 也很重要。它包含圆的半径，如果你在svg中改变它，你也需要在这里改变它。

javascript 代码为pbar 圆圈切换showAnim 类以响应对图像的点击。

pbar 的起始 stroke-dasharray 是 0 1000。第二个值只是大于弧的长度。当我尝试使用变量设置它时，动画不起作用。如果增加圆的半径，则可能需要增加第二个值。

您可以试一试this codepen 中的示例。