关键词：
【中文标题】带有图像和圆形进度条的圆形按钮【英文标题】：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 中的示例。
【讨论】：
带有圆形图像视图的自定义圆形 UIButton
】带有圆形图像视图的自定义圆形UIButton【英文标题】：CustomRoundUIButtonwithRoundImageView【发布时间】：2019-11-1010:49:07【问题描述】：我为UIButton创建了一个自定义类，我曾经使用@IBInspectable为我的按钮添加圆角和阴影。现在，我想... 查看详情
圆形图像作为按钮 PyQt5
...间】：2020-10-0511:13:06【问题描述】：我正在尝试创建一个带有图像的圆形按钮。到目前为止，我已经能够创建一个圆形按钮和一个带有图像背景的按钮，但我无法将两者结合起来。这是我当前的代码：importsysimportPyQt5.QtWidgetsclassW... 查看详情
如何更改圆形进度条的颜色？
】如何更改圆形进度条的颜色？【英文标题】：Howtochangecolorincircularprogressbar?【发布时间】：2011-07-1707:03:54【问题描述】：我在Android上使用循环进度条。我想改变它的颜色。我正在使用"?android:attr/progressBarStyleLargeInverse"风格。那... 查看详情
快速创建围绕图像的圆形进度条
...示。到目前为止，我已经设法使用下面的代码创建了一个带有绿色边框的圆形图像：self.image.layer.cornerRadius=self.image.frame.size. 查看详情
如何快速制作按钮中的圆形图像？ [复制]
...问题描述】：我在UIViewcontroller中有一个按钮，其中包含带有名称和图像的按钮。我想在此按钮[NOTWholeBUTTON]中制作UIImageView圆形。有什么办法吗？这是当前状态的截图：我想要的是：“类似问 查看详情
在 R 中创建一个带有堆叠条的圆形系统发育
】在R中创建一个带有堆叠条的圆形系统发育【英文标题】：CreateacircularphylogenywithstackedbarinR【发布时间】：2021-11-1213:28:45【问题描述】：我正在尝试在每个树尖的末端创建一个带有堆积条形图的循环系统发育。以下是我微弱尝试... 查看详情
带有 Swift UI 的圆形进度条
】带有SwiftUI的圆形进度条【英文标题】：CircularProgressBarwithSwiftUI【发布时间】：2020-06-1515:01:48【问题描述】：我正在使用SwiftUI创建一个倒数计时器应用程序。我尝试在其中添加一个圆形进度条，但它的外观从未改变。我准备了2... 查看详情
带背景图像按钮的圆形边框swift
...】：2018-06-2211:40:25【问题描述】：我正在使用此代码创建带有背景图像的圆形边框按钮Button.layer.cornerRadius=clear.frame.width/2Button.clipsToBounds=trueButton.layer.borderWidth=5.0B 查看详情
带有文本和图标的圆形按钮
】带有文本和图标的圆形按钮【英文标题】：Roundbuttonwithtextandiconinflutter【发布时间】：2018-09-0116:37:48【问题描述】：如何为flutter设置一个带有文本和图标的按钮？我想要一个button，它看起来像带有文本的图标，可以放在屏幕底... 查看详情
如何制作一个包含在整个屏幕上拉伸的背景图像的颤动应用程序，带有返回句子的图像的圆形按钮？
...一个包含在整个屏幕上拉伸的背景图像的颤动应用程序，带有返回句子的图像的圆形按钮？【英文标题】：Howtomakeaflutterappthatcontainsabackgroundimagestretchedovertheentirescreen,circlebuttonwithanimageinsidethatreturnssentence?【发布时间】：2021-07-0816... 查看详情
如何在 QT 中获得具有圆形边缘和圆形进度边缘的 QProgressBar？
...用圆角设置它的样式。无论我做什么，我似乎都无法获得带有圆角边缘的进度条（QProgressBar::chunk）的进度或块。请帮 查看详情
带有图像和颜色的圆形 UI 滑块
】带有图像和颜色的圆形UI滑块【英文标题】：CircularUISliderwithImageandColor【发布时间】：2016-11-1409:17:47【问题描述】：我正在使用UISlider开发一个应用程序，需要使其循环。是否可以通过一些本机代码实现，还是必须集成第3方库... 查看详情
带有实心圆圈的自定义圆形进度条
】带有实心圆圈的自定义圆形进度条【英文标题】：CustomCircularProgressBarwithsolidcircles【发布时间】：2015-05-1505:52:21【问题描述】：我想要一个这样的圆形进度条我试过了，但它看起来不像圆形以及如何将动画与淡入淡出一起放置... 查看详情
如何制作带有圆形图像和圆形文本的 UI，以及在同一个圆圈上添加评级图标。在 iOS 应用程序中
】如何制作带有圆形图像和圆形文本的UI，以及在同一个圆圈上添加评级图标。在iOS应用程序中【英文标题】：HowtomakeUIwithroundimageandroundtext,alsoaddrattingicononsamecircle.iniOSapplication【发布时间】：2015-04-0907:41:26【问题描述】：如何制... 查看详情
在计时器上进行的按钮周围的圆形进度指示器
】在计时器上进行的按钮周围的圆形进度指示器【英文标题】：CircularProgressIndicatorAroundaButtonthatProgressesOnaTimer【发布时间】：2021-02-1814:23:34【问题描述】：我有一个播放按钮，可以播放用户录制的消息。一旦用户点击播放按钮，... 查看详情
如何只实现一个圆形进度条，直到图像被滑动加载
】如何只实现一个圆形进度条，直到图像被滑动加载【英文标题】：Howtoimplementonlyonecircularprogressbaruntilimagesareloadedwithglide【发布时间】：2021-08-2406:49:15【问题描述】：您好，我只想实现一个圆形进度动画，直到从滑行加载图像，... 查看详情
带有条目并具有圆形边框的图像
】带有条目并具有圆形边框的图像【英文标题】：ImagewithEntryandhavingacircularborder【发布时间】：2015-10-0311:05:06【问题描述】：有什么办法可以放置带有Entry并具有圆形边框的图像。到目前为止，使用自定义EntryRenderer成功实现了圆... 查看详情
圆形百分比进度条
...指示器：在这种情况下，它显示75%。这应该怎么做？我在图像文件中有黄色圆圈，但如果它更容易，以某种方式，使用CSS完成这一切，我没关系。【问题讨论】：我还没有任何代码:)看看这个只需下载CSS和HTMLhere不要不用图像构... 查看详情