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

Question

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

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

我正在寻找一个不使用精心设计的库（最多是 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 代码切换pbar圆的showAnim类以响应单击图像。

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

• 您可以使用此 codepen 中的示例。