SVG进度条以圆的75的比例虚线显示
SVG进度条以圆的75%的比例虚线显示，可以通过使用SVG的<circle>元素和<path>元素来实现。
首先，创建一个SVG容器，并设置宽度和高度：
<svg width="200" height="200"></svg>然后，使用<circle>元素创建一个圆，并设置圆心坐标、半径和样式：
<circle cx="100" cy="100" r="80" fill="none" stroke="#000" stroke-width="2"></circle>接下来，使用<path>元素创建一个虚线路径，并设置路径的起点、终点、虚线样式和动画效果：
<path d="M20,100a80,80 0 1,0 160,0" fill="none" stroke="#000" stroke-dasharray="5,5" stroke-width="2">
<animate attributeName="stroke-dashoffset" from="0" to="251.2" dur="2s" repeatCount="indefinite"></animate>
</path>最后，将圆和虚线路径添加到SVG容器中：
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="none" stroke="#000" stroke-width="2"></circle>
<path d="M20,100a80,80 0 1,0 160,0" fill="none" stroke="#000" stroke-dasharray="5,5" stroke-width="2">
<animate attributeName="stroke-dashoffset" from="0" to="251.2" dur="2s" repeatCount="indefinite"></animate>
</path>
</svg>这样就实现了一个以圆的75%的比例虚线显示的SVG进度条。
SVG进度条可以用于展示加载进度、文件上传进度等场景。腾讯云提供了丰富的云计算产品，例如对象存储 COS（https://cloud.tencent.com/product/cos）和云服务器 CVM（https://cloud.tencent.com/product/cvm），可以用于存储和部署网站、应用程序等。
相关·内容
1回答
SVG进度条以圆的75的比例虚线显示
css、svg、progress-bar
我会尽量简短，但结果应该是这样的：我现在不知道怎么做，我将尝试从一个硬编码的值开始，然后尝试将循环百分比与实际值进行匹配。(不要介意中间的圆圈，我稍后会做的) margin: 15px; transform: rotate(135deg);
fill: tran
浏览 4提问于2018-08-10得票数 0
回答已采纳
1回答
如何以全精度设置半径线性梯度%
svg、ellipse、radial-gradients
我正在测试这段代码： <svg height="150" width="150"> <radialGradient id="grad1" cx="80%"stroke-dasharray="200" stroke-dashoffset="20" transform-origin="100 100" transform="rotate(-95)"
浏览 18提问于2019-11-19得票数 1
回答已采纳
1回答
边的D3条件样式
d3.js
我需要根据值是0还是1来设置线条颜色、粗细和虚线/非虚线。使用d3.v5.min.js。 这个颜色很好用。如何也设置厚度和虚线属性？我可以在同一个函数中返回它们吗？var path = svg.append("g") .data(links) .append("path")
.attr
浏览 16提问于2019-09-18得票数 0
回答已采纳
0回答
SVG圈有一个空隙
css、svg、geometry
我正在尝试使用SVG和一些技巧来构建一个饼图。 animation-fill-mode: forwards@keyframes slice { stroke-dasharray: 75代码非常简单:我使用stroke-dasharray来生成一个覆盖整个圆的破折号，并且可以进行调整以生成一个切片。然而，由于某种原因，没有一个浏览器“关闭”这个圈子。如果要调整饼图%，可以更改中的第一个数字
stroke-dasharray
浏览 5提问于2016-06-30得票数 1
回答已采纳
1回答
根据设置的百分比将对象圈起来
javascript、html、css、svg、loader
我有这样的任务:一个没有边界的圆圈，我们得到一些百分比(从用户或只是由我们自己输入-无关紧要)，在它之后，圆圈的边界应该填充取决于这个数字。我正在尝试使用SVG。但这对我来说并不清楚。它不适用于百分数，而且我不知道如何获得所有长度的正确数字 r="115" cx="135attribu
浏览 1提问于2017-10-16得票数 1
1回答
进度条添加阈值线
qt
我有进度条来显示实时传感器的瞬时值。QProgressBar的范围设置为
虚线的位置(即QLabel)是可以使用doubleSpinBox设置的阈值。
我的要求是相对于
浏览 15提问于2020-07-30得票数 0
1回答
带百分比的虚线圆形条
javascript、html、css、reactjs
我正在尝试制作一个带虚线的圆形进度条。我以编程方式创建了stroke-dasharray和stroke-dashoffset来绘制一个带百分比的圆。我需要画的不是实心圆，而是虚圆，如下所示： ? 我不能把实心圆变成虚圆。我是否遗漏了什么，或者我需要更改我的逻辑来绘制虚线圆圈？}
// Size of
浏览 34提问于2019-04-01得票数 0
回答已采纳
1回答
尺度无关元素
svg
我想要的基元是点、线段和文本。但是我之前不知道我会对什么比例感兴趣(可能只有一小部分多边形不能正常工作)，所以我需要能够缩放和平移图像。因此，放大无助于弄清楚在非常小的特征区域中发生了什么。
我找到了属性，它通过让我以像素为单位指定宽度，很好地修复了线段。但这并不能帮助我管理文本。理想情况下，无论变换比例有多大，它都应该是12点。我想我可以使用圆，但半径也是缩放的，所以如果你放大太远，它看起来就像一堆圆，而不是点。如果我使用向量效果属性，圆</
浏览 6提问于2012-05-22得票数 2
回答已采纳
2回答
SVG Circle文件在窗口上按逆时针方向从顶部开始描边
css、svg、svg-transforms
我创建了SVG图像与圆填充笔划颜色。我无法从顶部按逆时针方向填充颜色。如何使用内联CSS填充逆时针方向(需要使用内联CSS)。<svg width="100" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/stroke-width="26&
浏览 2提问于2018-02-01得票数 2
2回答
在SVG中缩放一个圆
svg
我有下面的SVG代码。为了只缩放圆圈，我必须缩放容器。我不能缩放SVG内的圆圈。 }</head> <svg150
浏览 4提问于2014-09-25得票数 2
回答已采纳
1回答
缩放SVG超过未知阈值会导致元素消失
ios、internet-explorer、svg、safari、openseadragon
我正在使用具有优秀的openseadragon。。缩小以查看出现的SVG版本的表格，覆盖模糊光栅版本的背景。
在iOS或OSX上的Safari中，当超过一个看似随意的阈值时，表格和上面的所有东西都会开始消失。消失点似乎取决于我不理解的
浏览 3提问于2016-09-01得票数 1
回答已采纳
2回答
如何在Mapbox-gl-js中跟踪虚线(非虚线)路径？
mapbox-gl-js
我使用的是最新版本的Mapbox-gl-js，我想以等距圆的形式跟踪路径，就像我们询问“步行”路线时Google Maps所做的那样： ? 使用Mapbox-gl-js，我尝试了虚线和圆圈布局，但它们不能满足我的需求： // Dash id: 'my-points', source: &#
浏览 111提问于2019-02-14得票数 3
回答已采纳
1回答
SVG圆元素在尺度变换上的跳跃
javascript、d3.js、svg
下面是使用D3进行循环并将其缩放到鼠标上方的代码。它做它应该做的事情，但也把板球带到其他地方，这意味着圈尺度和跳跃(翻译)到其他地方。我无法理解其原因。
浏览 0提问于2017-02-06得票数 2
回答已采纳
4回答
在div中创建循环下拉列表
html、css
我需要实现这样的东西：
其思想是，菜单栏包含一个图像或文本，以提请注意的用户在右边。设计师想要一个从主div下来的圆圈。
浏览 2提问于2013-10-23得票数 0
回答已采纳
1回答
如何在d3中制作图表的工具提示？
d3.js
我写了代码，但是我不知道如何让工具提示不是在鼠标后面水平移动，而是在最近的水平标记附近移动(如示例中所示)。
尚不清楚工具提示中粗体文本上方的文本来自何处。如何将其移除，使其看起来像图片中的样子？如何使工具提示的标题与X轴上的标签相匹配？
浏览 1提问于2021-02-25得票数 0
2回答
在AS3中使用GreenSock补间精灵大小
actionscript-3、flash、animation、tween、gsap
我见过使用scaleX对矩形进行补间的例子，但我找不到任何对圆进行补间的东西。(我画的“圆”实际上是一个圆环形状，我希望外面的圆是补间的那个)。);我试过这样做，但是抛出了很多错误。我不认为这样做是可能的：
TweenMax.to(myCircle, 2, {res
浏览 0提问于2013-03-15得票数 1
回答已采纳
1回答
是否有办法通过使用Konva js将圆周向外/向内拖动来调整圆的大小？
javascript、canvas、konvajs
使用Konva js，有没有一种方法可以在不显示大小的情况下拖动圆的圆周，以调整圆的大小(使半径增大)？所有的帮助都将不胜感激。Thx
浏览 0提问于2018-11-12得票数 1
回答已采纳
1回答
有没有可能改变拉斐尔JS (或SVG)坐标系？
svg、raphael、vml
我正在使用RaphaelJS库，我注意到它是非常面向像素的。我想画一些与视口比例相适应的东西。有没有可能重新定义画布坐标系，使其从0运行到1，所以如果我画了一个以0.5，0.5为中心的圆，即使容器的大小改变了，它也会留在容器的中间？这可能更像是一个SVG/VML问题，因为即使拉斐尔无法做到这一点，我也可以直接访问底层的svg元素。
浏览 2提问于2011-11-14得票数 0
回答已采纳
1回答
使用刻度更新Python中进度条的颜色？
python-3.x、tkinter、progress-bar
我有一个进度条，它根据我移动标度的值来改变它的值。现在，我想让进度条实时地改变颜色，这取决于这个比例被移动到什么值。scalevar.get())) elif scalevar.get() <= 75因为我在一个按钮内调用它来测试它，当我调整缩放，然后单击该按钮，进度条的颜色会发生变化。我
浏览 5提问于2017-05-25得票数 2
回答已采纳
3回答
如何在<object>标签中以不同的比例显示SVG图像？
html、svg
如何在object标签中以与原始比例不同的比例显示SVG图像？<?xml version="1.0" encoding="UTF-8" ?="50" cy="50" r="50" fill="orange"></circle>
<&#
浏览 0提问于2013-05-16得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
