向svg饼图添加填充动画
Adding a fill animation to a svg pie chart
我想在加载时为具有动态未知值的饼图设置动画。假设我尽快检索值并将其转换为四舍五入的百分比:
var percentage = Math.round(sum * 100 / total);
然后我把我的价值放在那里:
<div class="pie animated" id="pie-get-percentage"></div>
$('#pie-get-percentage').html(percentage);
SVG
$(document).ready(function() {
$('#pie-get-percentage').html(percentage);
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
$$('.pie').forEach(function(pie) {
var p = parseFloat(pie.textContent);
var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(NS, "svg");
var circle = document.createElementNS(NS, "circle");
var title = document.createElementNS(NS, "title");
circle.setAttribute("r", 16);
circle.setAttribute("cx", 16);
circle.setAttribute("cy", 16);
circle.setAttribute("stroke-dasharray", p + " 100");
svg.setAttribute("viewBox", "0 0 32 32");
title.textContent = pie.textContent;
pie.textContent = '';
svg.appendChild(title);
svg.appendChild(circle);
pie.appendChild(svg);
});
});
CSS
.pie-wrapper {
.pie {
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
transform: rotate(-90deg);
}
svg {
background: $primary;
border-radius: 50%;
}
circle {
fill: $primary;
stroke: $secondary;
stroke-width: 32;
}
@keyframes grow {
to {
stroke-dasharray: 100 100
}
}
.pie.animated {
animation: grow 2s linear;
}
}
正如你所看到的,我原以为我只能简单地摆弄.pie.animated
CSS规则,但到目前为止,我还无法将动画设置到我的动态值,只能设置完整的圆圈。
基本上,如果我的值是42%,我会尝试将我的圆圈扩大到SVG的42%。但问题是,我不能真正给我的CSS动画一个动态值。也许我可能需要使用内联CSS,但我不确定这是否适用于动画关键帧。
JSFiddle在这里
我玩了JSFiddle的JQuery部分,结果就是这样。
<div class="pie">60%</div>
<div class="pie">90%</div>
<div class="pie">12%</div>
这个想法很简单。我每次都使用javascript间隔计时器来调用计数计时器。我还添加了一些max-val、inc-val和其他相关变量使其工作。
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
function count(){
var isUsed = false;
$$('.pie').forEach(function(pie) {
var p = parseFloat(pie.textContent);
if(pie.maxValue == null){
pie.maxValue = p;
pie.incValue = p / 100.0;
pie.lastValue = 0;
}
else
pie.lastValue = pie.lastValue + pie.incValue;
if(pie.lastValue <= pie.maxValue){
var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(NS, "svg");
var circle = document.createElementNS(NS, "circle");
var title = document.createElementNS(NS, "title");
circle.setAttribute("r", 16);
circle.setAttribute("cx", 16);
circle.setAttribute("cy", 16);
circle.setAttribute("stroke-dasharray", pie.lastValue + " 100");
svg.setAttribute("viewBox", "0 0 32 32");
title.textContent = pie.textContent;
pie.textContent = '';
svg.appendChild(title);
svg.appendChild(circle);
pie.appendChild(svg);
isUsed = true;
}
});
if(isUsed)
window.setTimeout(function() { count(); }, 30);
}
window.setTimeout(function() { count(); }, 30);
count();
相关文章:
- 如何设置html元素填充的动画
- 动画制作/减缓元素填充移除元素留下的空间
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 仅为父对象的填充设置动画
- 使用getJSON填充动画响应图像网格
- 动画自定义电池填充图标
- SVG 填充路径动画
- 使用 jquery 对 SVG 的填充进行动画处理
- 此请求动画帧填充是否也会产生时间戳
- CSS动画填充模式-我做错了什么
- JavaScript-带自定义动画填充的条形图
- 覆盖动画填充模式:在JavaScript/CSS中转发
- Snap.load()一个svg img并为其填充颜色设置动画's子节点
- 使用CSS或Javascript填充动画
- 向svg饼图添加填充动画
- 填充动画延迟
- 如何使svg路径填充为进度动画
- 使用JavaScript在SVG元素上动画填充不透明度
- 使用Canvas设置圆形动画-如何展开以填充整个视口
- 使用CSS使SVG沿着路径填充动画