在Chrome中,笔划dashoffset不随jQuery更改
我试图在元素中使用jQuery更改笔划dashoffset。它在Mozilla中运行良好,但chrome并没有改变它的价值 请告诉我如何使用jQuery进行更改,如果还有其他方法,请告诉我 这是我的密码在Chrome中,笔划dashoffset不随jQuery更改,jquery,css,google-chrome,svg,Jquery,Css,Google Chrome,Svg,我试图在元素中使用jQuery更改笔划dashoffset。它在Mozilla中运行良好,但chrome并没有改变它的价值 请告诉我如何使用jQuery进行更改,如果还有其他方法,请告诉我 这是我的密码 <!-- html --> <div class="circleGraph" data-progress="86"> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/
<!-- html -->
<div class="circleGraph" data-progress="86">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<circle style="fill:none; stroke:rgba(0,0,0,0.1);" stroke-width="9" r="60" cy="60" cx="65"/>
<circle style="fill:none;" stroke-width="9" class="graphProgress" r="60" cy="60" cx="65"/>
</svg>
</div>
<!-- CSS -->
.circleGraph {width: 150px; height: 150px; position: relative;}
.circleGraph .subjectIcon{width: 60px; height: 60px; z-index: 1;}
.circleGraph .subjectIcon img {width:inherit; height:auto;}
.circleGraph svg {width: inherit; height:inherit; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);}
.circleGraph svg circle {transform: translate(10px,15px);}
.graphProgress {stroke-dasharray: 380; stroke-dashoffset: 380; transition: all 1s ease 0.5s;}
<!-- jQuery -->
$(".circleGraph").each(function () {
var progressValue = $(this).data('progress');
var progressBar = $(this).find('.graphProgress');
var actualValue = parseInt(100 - progressValue);
var circleMax = $(progressBar).css('stroke-dasharray');
var absValue = (circleMax * actualValue) / 100;
$(progressBar).css({strokeDashoffset: absValue});
});
.circleGraph{宽度:150px;高度:150px;位置:相对;}
.circleGraph.subjectIcon{宽度:60px;高度:60px;z索引:1;}
.circleGraph.subjectIcon img{宽度:继承;高度:自动;}
.circleGraph svg{宽度:继承;高度:继承;变换:旋转(-90度);-webkit变换:旋转(-90度);-moz变换:旋转(-90度);-ms变换:旋转(-90度);-o变换:旋转(-90度);}
.circleGraph svg圆{变换:平移(10px,15px);}
.graphProgress{stroke dasharray:380;stroke dashoffset:380;转换:所有1都轻松0.5s;}
$(“.circleGraph”)。每个(函数(){
var progressValue=$(this.data('progress');
var progressBar=$(this.find('.graphProgress');
var actualValue=parseInt(100-progressValue);
var circleMax=$(progressBar).css('stroke-dasharray');
var absValue=(circleMax*实际值)/100;
$(progressBar).css({strokeDashoffset:absValue});
});
var absValue向我显示NaN,因为circleMax随“px”一起出现,但使用带circleMax计算的parseInt,absValue不再显示NaN,并且工作正常 var absValue向我显示NaN,因为circleMax随“px”一起出现,但使用带circleMax计算的parseInt,absValue不再显示NaN,并且工作正常