1. 技术文章
  2. SVG progress bar with image

SVG progress bar with image

由 雨燕双飞 提交于 2020-12-04 03:44:15

问题


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

})();

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


回答1:


To solve, you need to combine two animations:

  1. Painting half of the arc from the beginning to the middle (top)
  2. Animation of movement of a circle with an image inside

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>



回答2:


This is a case where it has advantages not to use thestroke-dasharray trick.

SVG can draw a marker at the end of a path. That marker can be any sort of grafic, and its syntax is just like that of a <symbol>. The position of the marker is defined by the path d attribute, and not influenced by a dashed stroke.

The general strategy is to compute the endpoint of the path

endpoint_x = center_x - cos(percentage / 100 * 180°) * radius
endpoint_y = center_y - sin(percentage / 100 * 180°) * radius

It is possible to do so relatively seamlessly because you decided to use only a half-circle to represent 100%. I have changed the way the path data are written to make that possible:

`M5 50 A 45 45 0 ${large} 1 ${x} ${y}`
  • A means: draw an arc and use absolute coordinates.
  • 45 45 0 use a rx of 45, a ry of 45, do not rotate the axis of the arc.
  • ${large} is the important bit. It discerns arcs of less than 180° from those that have more than 180°. As soon as that value would be crossed, the flag must change from 0 to 1. But since you are never expecting values above 180°, you would not need it.
  • 1 means looking in the direction of the path, the arc should be drawn to the left side.
  • ${x} ${y} are the final coordinates expressed in absolute, not relative coordinates.

The <marker> element has a number of attributes that must be considered:

  • orient="0" means the marker will not change its direction with the direction of the path at its end. orient="auto" would make it turn around , as you would like to see with an arrow for example.
  • markerUnits="userSpaceOnUse" means the numbers in the other attributes are in px units of the coordinate system of the path. Default would be markerUnits="strokeWidth", which would mean a size relative to the width of the stroke.
  • viewBox="-8 -8 16 16" is choosen because the circle used is centered around the coordinate system origin.
  • markerWidth="16" markerHeight="16" is saying how large the marker should be drawn.
  • refX="0" refY="-10" describes how the marker should be positioned: Take a point in the coordinate system of the marker itself (slightly above its topmost point and in the middle), and align it exactly with the end of the path.

Finally, note the marker-end="url(#image)" presentation attribute for the path. This is what sets the marker, and defines that it will be at the end of the path.

(function(){

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

   function computePath (percentage) {
       var x = 50 - Math.cos(percentage / 100 * Math.PI) * 45,
           y = 50 - Math.sin(percentage / 100 * Math.PI) * 45,
           large = percentage > 100 ? 1 : 0;
           
       return `M5 50 A 45 45 0 ${large} 1 ${x} ${y}`;
   }
    

    var to = setTimeout(function(){
        $progress.attr('d', computePath($percentage));
        clearTimeout(to);
    }, 500);

})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="w-100 case-progress-bar input p-2" style="position: relative;" data-percentage="80">
  <svg class='progress_bar' viewBox="0 0 100 70" >
    <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 50 A 45 45 0 0 1 95 50`" stroke="#f00"
            marker-end="url(#image)"></path>
    </g>
    <marker id="image" orient="0" markerUnits="userSpaceOnUse"
            viewBox="-8 -8 16 16"
            markerWidth="16" markerHeight="16" 
            refX="0" refY="-10">
       <circle r="8" fill="#aaf" />
       <path d="M-6 0h12" stroke="#000" stroke-width="2" />
    </marker>
  </svg>
</div>



回答3:


Just use a little JavaScript since you can't do trigonometry in CSS easily yet.

Codepen: https://codepen.io/mullany/pen/02cd0773588b3d975c8443ab6a87f670

(function(){

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

    $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))');
        var angleInRadians = 180*(1-$percentage/100) * 0.01745329251;

        var xPos = 5 + 45 * (1 + Math.cos(angleInRadians) ); 
        var yPos = 5 + 45 * (1 - Math.sin(angleInRadians) );        


        $circpos.css('cx', xPos);
        $circpos.css('cy', yPos);
        clearTimeout(to);


    }, 500);

})();



回答4:


I had a very similarly shaped loading SVG. You cen see it in action here. The green one at the bottom of the main banner.

What I used was the ProgressBar.js library. It made it very easy. I just focused on adjusting my SVG in terms of shape, because of the design of my site and then just used:

<svg id="progress-bar" xmlns="http://www.w3.org/2000/svg" width="650" height="526" viewBox="0 0 650 526">
   <path opacity=".55" id="progress-bar-base" fill="none" stroke="#fefefe" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M84.591 512.622S20 441.232 20 324.941 79.903 131.327 137.4 84.476 269.116 20 324.94 20s124.217 15.743 184.57 62.183 89.159 101.578 103.475 142.419c14.316 40.84 25.203 105.21 8.788 170.477-16.415 65.268-43.628 101.409-56.482 117.543"></path>
   <linearGradient id="grade" gradientUnits="userSpaceOnUse" x1="592.08" y1="157.665" x2="46.149" y2="472.859">
       <stop offset="0" stop-color="#2cab9a"></stop>
       <stop offset="1" stop-color="#8ed1c3"></stop>
   </linearGradient>
   <path fill-opacity="0" id="progress-bar-indicator" stroke="url(#grade)" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M84.591 512.622S20 441.232 20 324.941 79.903 131.327 137.4 84.476 269.116 20 324.94 20s124.217 15.743 184.57 62.183 89.159 101.578 103.475 142.419c14.316 40.84 25.203 105.21 8.788 170.477-16.415 65.268-43.628 101.409-56.482 117.543" style="stroke-dasharray: 1362.73, 1362.73; stroke-dashoffset: 1140.45;"></path>
</svg>

var progressBar = new ProgressBar.Path('#progress-bar-indicator', {
    easing: 'easeInOut',
    duration: 2500
});
progressBar.set(0); // Initiate it at zero.
progressBar.animate(0.33); // this is your percentage of load

It's a very basic example, but I think you could adjust it to your needs.

As for the image, perhaps you could add it to your own SVG at the tip of the loading curve and it should move with it I think.



来源：https://stackoverflow.com/questions/64717060/svg-progress-bar-with-image

标签
javascript
html
jquery
animation
svg
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!