Question

我正在尝试使用元素中的jQuery更改stroke-dashoffset。它在Mozilla中运行良好，但铬并没有改变其价值。

请让我知道如何使用jQuery更改它，如果有任何其他方式，请告诉我。

这是我的代码..

<!-- 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});
  });

Answer 1

var absValue向我展示了NaN，因为circleMax正在使用＆＃39; px＆＃39;，但是使用parseInt和circleMax计算，absValue不再显示NaN并且它运行良好..

在Chrome中，使用jQuery不会改变stroke-dashoffset

1 个答案: