像下面的HTML代码一样,我仍然希望以div的方式设置div的宽度.
Question: How am I able to use bootstrap progress bar to be wrapped
around my image where would still be able to set progress bar with in div?
这里是我迄今为止所尝试过的
Snippet Example Codepen
CSS
.progress {
border-radius: 50%;
}
.progress-bar {
border-radius: 50%;
}
.wrapper > img {
position: absolute;
top: 0;
left: 0;
text-align: center;
}
HTML
<div class="container">
<div class="row">
<div class="page-header">Circle progress bar with image</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="wrapper">
<img src="holder.js/150x150" class="img-circle img-thumbnail" />
<div class="progress" style="height: 150px; width: 150px;">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
</div>
</div>
</div>
解决方法
所有进一步的计算取决于这些属性的值,例如定位图像和圆,设置svg的宽度和高度,以及圆的半径和圆周的值.如果您的页面中有多个圆圈,则圆圈不需要具有相同的宽度和大小,每个圆圈将从相应的img中获取尺寸.
所有魔法都在这一行：
'stroke-dasharray': SVG.circum * ratio / 100 + ' ' + SVG.circum
在圆周长度的周围,这个概念背后的概念是用我们的脚本控制stroke-dasharray(1)的值.例如,假设您调用的函数提供值为70,并且假设该值为500,那么它将是：
stroke-dasharray: 350 500
想像第二个值“500”是完整的圆,第一个值“350”是笔画停止的地方.
要设置某个圆的值,只需调用miProgressbar()函数,传递circle元素和所需的值,如下所示：
miProgressbar($('#circle1'),70);
Updated: All examples below tested with Chrome,Firefox,IE9-IE11 and Vivaldi browsers,and worked in all even in IE9+,except that in IE9-IE11 example5 and example6 only the first circles have strokes,not sure about modern versions of Safari,Opera and Edge.
示例1：CodePen – 全圆[ratio = 100％]
var svgCircles = $('.wrapper svg circle');
miProgressbar($('#circle1'),70);
// from here on,everything works automatically,you don't need to change anything
svgCircles.each(function() {
var $this = $(this),$parent = $this.parent(),SVG = miSVGdata($this);
$this.attr('r',SVG.radius);
$parent.css({
'top': SVG.strokeWidth / 2,'left': SVG.strokeWidth / 2
});
$parent.attr('viewBox','0 0 ' + SVG.svgWidth + ' ' + SVG.svgHeight);
$parent.attr('width',SVG.svgWidth);
$parent.attr('height',SVG.svgHeight);
});
function miProgressbar(element,ratio) {
var SVG = miSVGdata(element);
element.css({
'stroke-dasharray': SVG.circum * ratio / 100 + ' ' + SVG.circum
});
}
function miSVGdata(element) {
var svgParent = element.parent(),strokeWidth = parseInt(element.attr('stroke-width'),10),img = element.parents('.wrapper').find('img'),svgWidth = parseInt(img.attr('width'),10) + strokeWidth,svgHeight = parseInt(img.attr('height'),circum,radius,svgObj;
img.css({
top: strokeWidth,left: strokeWidth
});
radius = svgWidth / 2 - strokeWidth / 2;
circum = parseInt(2 * radius * 3.14,10);
svgObj = {
svgWidth: svgWidth,svgHeight: svgHeight,parent: svgParent,strokeWidth: strokeWidth,radius: radius,circum: circum
};
return svgObj;
}
HTML：
包装器div的结构将如下所示,请记住,所有自动计算均基于每个图像的宽度和高度属性,因此必须为这些图像提供.
<div class="wrapper">
<img src="holder.js/150x150" width="150" height="150" class="img-circle img-thumbnail" />
<svg class="mi-progressbar">
<circle id="circle1" r="25%" cx="50%" cy="50%" stroke-width="20"></circle>
</svg>
</div>
请记住,您甚至可以通过javascript使用.insertAfter()注入SVG代码,这样您的硬编码包装器将仅具有img.
示例2：CodePen – 着色
具有与引导进度条和相同命名样式相同颜色的多个图像和不同样式的示例,如下所示：
svg circle.progress-bar-success{ stroke:#5cb85c; }
miProgressbar($('#circle1'),0);
miProgressbar($('#circle2'),100);
miProgressbar($('#circle3'),65);
miProgressbar($('#circle4'),40);
miProgressbar($('#circle5'),15);
例4：CodePen – 动画
通过将不同的增加比值传递给miProgressbar(元素,比率)函数,您可以对循环进度条进行动画处理.上述动画的代码片段：
var i = 0;
setInterval(function() {
if(i <= 100){
miProgressbar(svgCircles,i);
i++;
}
},50);
示例5：CodePen – 不同的图像大小,svg圆将通过改变img的宽度和高度属性的值来自动适应它.
*在IE9 – IE11中没有工作,只是第一个循环
示例6：CodePen – stroke-width的值控制边框的宽度
*在IE9 – IE11中没有工作,只是第一个循环
——————————————–
(1) – 来源：
> https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
> https://css-tricks.com/almanac/properties/s/stroke-dasharray/
> Lea Verou – The Missing Slice 35：50-42：10
