带有图像的SVG进度栏 [英] SVG progress bar with image

问题描述

我正在尝试使用SVG创建进度条(arc).我目前正在使用进度条，它正在使用存储在data属性中的值移动所需的数量，并且看起来还不错.尽管我正在尝试使图像与条沿弧线移动.图片应从带有条形图的0开始，然后移至完成点，例如50％，该图片将位于顶部.

I am trying to create a progress bar (arc) with SVG. I currently have the progress bar working, it is moving the desired amount using a value stored in a data attribute, and looks pretty good. although i am trying to get an image to move around the arc with the bar. The image should start at 0 with the bar and move around to the completion point, say 50% which will be at the top.

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

})();

这是我目前拥有的 这就是我要实现的目标

推荐答案

要解决，您需要组合两个动画:

To solve, you need to combine two animations:

1. 从起点到中间(顶部)画弧的一半
2. 带有图像的圆形运动的动画

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

Set the same time for both animations

<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>  

这篇关于带有图像的SVG进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！