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

Question

我正在尝试创建一个按钮，该按钮的内部为图像，外部为圆形进度条，按下该按钮后该颜色将变为彩色。

我有一个.svg图像，该图像必须显示为直径140px的圆形。该图像必须是触发请求并激活其周围进度条的按钮。

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

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

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

我想创建类似示例的内容，但我希望使用.svg图像代替“暂停”（两个破折号）。

示例：

Answer 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 height="100" width="100">
  <defs>
    <clipPath id="cFrame">
      <circle cx="50" cy="50" r="40" />
    </clipPath>
  </defs>
    <image id="mybutton" x="0" y="0%" width="100" height="100" 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代码会在图片上点击以切换showAnim类的pbar圈子。

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

• 您可以试用this codepen中的示例。