javascript - 带有图像的 SVG 进度条

Question

我正在尝试使用 SVG 创建进度条(弧形)。我目前有进度条工作，它使用存储在数据属性中的值移动所需的数量，看起来非常好。尽管我正在尝试让图像随着条形图围绕弧线移动。图像应该从 0 开始，并移动到完成点，比如 50%，这将在顶部。

<div class="w-100 case-progress-bar input p-2" style="position: relative;" data-percentage="80">
<svg class='progress_bar' viewBox="0 0 100 50" >
 <g fill-opacity="0" stroke-width="4">
  <path d="M5 50a45 45 0 1 1 90 0" stroke="#EBEDF8"></path>
  <path class="progress" d="M5 50a45 45 0 1 1 90 0" stroke="#f00" stroke-dasharray="142" stroke-dashoffset="142"></path>
 </g>
 <circle fill="url(#image)" id='case_progress__prog_fill' class="case_progress__prog" cx="0" cy="0" r="8" fill="#999" stroke="#fff" stroke-width="1" />
 <defs>
  <pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 60 60">
   <image x="0%" y="0%" width="60" height="60" xlink:href="https://via.placeholder.com/150x150"></image>
  </pattern>
 </defs>
</svg>
</div>

(function(){

    var $wrapper = $('.case-progress-bar'),
        $bar = $wrapper.find('.progress_bar'),
        $progress = $bar.find('.progress'),
        $percentage = $wrapper.data('percentage');

    $progress.css({
        'stroke-dashoffset': 'calc(142 - (0 * 142 / 100))',
        'transition': 'all 1s'
    });

    var to = setTimeout(function(){
        $progress.css('stroke-dashoffset', 'calc(142 - (' + $percentage + ' * 142 / 100))');
        clearTimeout(to);
    }, 500);

})();

this is what I currently have this is what i'm trying to achieve

Answer 1

要解决，需要结合两个动画:

1. 从开始到中间(顶部)绘制半个圆弧
2. 圆圈内有图像的运动动画

为两个动画设置相同的时间

<div class="w-100 case-progress-bar input p-2" style="position: relative;" data-percentage="80">
<svg class='progress_bar' viewBox="0 0 100 50" >

 <g fill-opacity="0" stroke-width="4">
  <path id="pfad"  d="M5 50C5 44.1 6.1 38.5 8.2 33.4 10.8 26.8 14.9 20.9 20.2 16.3 28.1 9.3 38.6 5 50 5" stroke="#EBEDF8"></path> 
  
   <path   d="M5 50a45 45 0 1 1 90 0" stroke="#EBEDF8"></path>
  
    <!-- Animation to fill half an arc -->
  <path class="progress" d="M5 50a45 45 0 1 1 90 0" stroke="#f00" stroke-dasharray="142" stroke-dashoffset="142">
    <animate attributeName="stroke-dashoffset" from="142" to="71" dur="4s" fill="freeze" />
  </path>
 </g>
 
 <defs>
  <pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 60 60">
   <image x="0%" y="0%" width="60" height="60"  xlink:href="https://via.placeholder.com/150x150"></image>
  </pattern>
 </defs>

  
   <circle fill="url(#image)" id='case_progress__prog_fill' class="case_progress__prog" cx="0" cy="0" r="8" fill="#999" stroke="#fff" stroke-width="1" >
     <!-- Animation of movement of a circle with an image    -->
   <animateMotion begin="0s" dur="4s" fill="freeze"> 
    <mpath xlink:href="#pfad" />
</animateMotion>
   </circle>

</svg>
</div>