任何人都知道如何在svg中创建一个“progressbar”圈子?我需要指定圆的百分比,颜色以蛋糕的形状增长。
只要我有一个属性来改变它的当前状态,增长就可以是静态的。
答案 0 :(得分:10)
以下是我以前使用过的想法。通过对css
和animation
标记进行一些修改,我们可以为直观的用户体验带来更多效果。
---示例代码----
.over{
-webkit-animation: rotator 1.5s ease-in-out infinite;
stroke-dasharray: 107,38;
}
.bag{
position: absolute;
}
@-webkit-keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

<div class="container">
<svg class="bag" height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="#F8BBD0" stroke-width="3" fill="none">
</circle>
</svg>
<svg class="over" height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="#E91E63" stroke-width="3" fill="none" >
<animate attributeType="CSS" attributeName="stroke-dasharray" from="1,254" to="247,56" dur="5s" repeatCount="indefinite" />
</circle>
</svg>
</div>
&#13;
希望你能找到一些这样的东西。 :)
答案 1 :(得分:8)
谢谢,boldewyn。
为了回答我自己的问题,我找到了以下解决方案:
可以在模板中使用以下路径:
<path id="progress" fill="none" stroke="#ffffff" d="" stroke-width="10"/>
使用Raphael js-framework中的这个函数来更新x和y。如果total为100,则value是进度的百分比:
function updateState (value, total, R) {
var center;
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = 300 + R * Math.cos(a),
y = 300 - R * Math.sin(a),
path;
if (total == value) {
path = "M"+ 300 +","+ (300 - R) +" A"+ R+","+ R+","+ 0+","+ 1+","+ 1+","+ 299.99+","+ 300 - R;
} else {
if(alpha > 180) {
center = 1;
} else {
center = 0;
}
path = "M"+ 300+","+ (300 - R) +" A"+ R+","+ R+","+ 0+"," + center +","+ 1+","+ x+","+ y;
}
return path;
}
返回的路径变量是path元素上d属性的值。
如果您的浏览器支持SVG Full以及路径元素的Elliptical Arc命令,则此方法非常有效。在我的情况下,我只有SVG很小,所以这对我不起作用:(
答案 2 :(得分:4)
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
路径使用“椭圆弧”命令绘制部分圆。您可以绘制其中几个,每个描述不同的圆形部分,或者为其中一个提供ID并使用<use xlink:href="#ID" />
引用它。然后你可以旋转<use/>
。根据粒度的需要绘制尽可能多的内容(例如,100个扇区允许步长为0%到100%)。
要将它们着色,只需将每个扇区的fill=""
属性设置为拟合值。
答案 3 :(得分:4)
在JavaScript中使用此自我实现的方法 例如,这里百分比= 85
HTML代码:
<p style="position:absolute;margin-left:95px;margin-top:50px;" id="percentage">0 %</p>
<svg style="position:absolute" id="svg_test" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="110" cy="60" r="50" fill="none" stroke="#e4e4e4" stroke-width="2"></circle>
<path id="svgpath" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="none" stroke="#16a6b6" d="M60,60 A50,50 0 0,1 160,60" stroke-width="2"></path>
</svg>
<circle style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="110" cy="60" r="50" fill="none" stroke="#e4e4e4" stroke-width="2"></circle>
<path id="svgpath" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="none" stroke="#16a6b6" d="M60,60 A50,50 0 0,1 160,60" stroke-width="2"></path>
</svg>
jQuery代码:
percentage=85
if(percentage>=50)
{
flag=1;
}
var per=0;
$(svg).animate({ 'to': 1 }, {
duration: 2000,
step: function(pos, fx) {
//var offset = (pos);
if(pos<0.5)
{
if(percentage>=50)
{
per=180;
$('#percentage').html(Math.round(pos*100)+" %");
}
else
{
per=(percentage*180/50);
$('#percentage').html(Math.round(percentage*pos*2)+" %");
}
endx=110-50*Math.cos(0+(Math.PI/180)*per*(pos*2));
endy=60-50*Math.sin(0+(Math.PI/180)*per*(pos*2));
svg.setAttribute('d',current_dx+endx+","+endy);
}
else if(pos>=0.5 && pos!=1 && flag==1)
{
per=((percentage-50)*180/50);
$('#percentage').html(Math.round(50+(percentage-50)*(pos-0.5)*2)+" %");
endx=110+50*Math.cos(0+(Math.PI/180)*per*(pos-0.5)*2);
endy=60+50*Math.sin(0+(Math.PI/180)*per*(pos-0.5)*2);
svg.setAttribute('d',current_d+endx+","+endy);
}
}
});
演示:Click Here
答案 4 :(得分:2)
前一段时间,我需要一个,所以我学了很多东西来完成它。 您只需要一个简单的SVG标记,其中包含正确的坐标,一些CSS以及一些JS(允许更改进度条的百分比)。 但同时你可以根据你想要的百分比在后端生成SVG,除非你的进度不能只读,否则它也会有效。
这是实施:http://codepen.io/leandroico/pen/zwIHl
这是SVG标记的示例:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<g class="arcs">
<circle cx="50" cy="50" r="49" class="outer-circle" />
<path d="M50 1 A 49 49, 0, 1, 1, 7.06 73.61, L 50 50 z" class="outer-arc" id="arc1" />
<circle cx="50" cy="50" r="35" class="inner-circle" />
<path d="M50 15 A 35 35, 0, 1, 1, 19.33 66.86" class="inner-arc" id="arc2" />
</g>
<g class="circles">
<circle cx="50" cy="50" r="49" class="outer-circle" />
<circle cx="50" cy="50" r="35" class="inner-circle" />
</g>
<text x="50" y="58" id="percentage-label">67%</text>
</svg>
答案 5 :(得分:1)
<svg xmlns="http://www.w3.org/2000/svg" width="225" height="225">
<g>
<circle cx="112" cy="112" r="95"></circle>
<path id="path" d="M 112,17 A 95,95 0 0,0 112,17"></path>
</g>
</svg>
<script type="text/javascript">
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
var x = centerX + radius * Math.cos(angleInRadians);
var y = centerY + radius * Math.sin(angleInRadians);
return [x, y];
}
function drawCircle(elm, centerX, centerY, radius, percentage) {
var angle = (360 * (percentage / 100)) % 360;
var start = polarToCartesian(centerX, centerY, radius, -90);
var end = polarToCartesian(centerX, centerY, radius, -(angle + 90));
var large = percentage < 50 ? 0 : 1;
var length = (2 * Math.PI * radius) * (percentage / 100);
console.log(start, end, angle);
elm.setAttribute('d', 'M ' + start[0] + ',' + start[1] + ' A ' + radius + ',' + radius + ' ' + 0 + ' ' + large + ',' + 0 + ' ' + end[0] + ',' + end[1]);
elm.setAttribute('stroke-dasharray', length);
elm.setAttribute('stroke-dashoffset', length);
}
drawCircle(document.getElementById('path'), 112, 112, 95, 47);
</script>
答案 6 :(得分:0)
{{3}}
<div class="flex-wrapper">
<div class="single-chart">
<svg viewBox="0 0 36 36" class="circular-chart orange">
<path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="circle" stroke-dasharray="30, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">30%</text>
</svg>
</div>
</div>
此svg圈子必需的CSS
.flex-wrapper {
display: flex;
flex-flow: row nowrap;
}
.single-chart {
width: 33%;
justify-content: space-around ;
}
.circular-chart {
display: block;
margin: 10px auto;
max-width: 80%;
max-height: 250px;
}
.circle-bg {
fill: none;
stroke: #eee;
stroke-width: 3.8;
}
.circle {
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.circular-chart.orange .circle {
stroke: #ff9f00;
}
.percentage {
fill: #666;
font-family: sans-serif;
font-size: 0.5em;
text-anchor: middle;
}
a {
font-size: 26px;
}
.flex-wrapper {
display: flex;
flex-flow: row nowrap;
}
.single-chart {
width: 33%;
justify-content: space-around ;
}
.circular-chart {
display: block;
margin: 10px auto;
max-width: 80%;
max-height: 250px;
}
.circle-bg {
fill: none;
stroke: #eee;
stroke-width: 3.8;
}
.circle {
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.circular-chart.orange .circle {
stroke: #ff9f00;
}
.percentage {
fill: #666;
font-family: sans-serif;
font-size: 0.5em;
text-anchor: middle;
}
a {
font-size: 26px;
}
<div class="flex-wrapper">
<div class="single-chart">
<svg viewBox="0 0 36 36" class="circular-chart orange">
<path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="circle" stroke-dasharray="30, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">30%</text>
</svg>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<a href="https://codepen.io/sergiopedercini/">Thanks to sergiopedercini</a>