如何根据数据库中的值给 SVG 画圈？

Question

PHP Values

$total_hours = 10; 
$used_hours = 4; 
$remaining_hours = 6;

HTML

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" 
     fill="transparent" />

Now how can I give the circle dynamic stroke based on php values? Thanks, and sorry I am totally new to web development. OR how to do this with circle progress bar (see the attachment example please)

Answer 1

Without going to more advanced code (but simpler to create your "donut" arc, eg using D3.js library etc) you can solve this with javascript and basic SVG:

<?php
$total_hours = 10; 
$used_hours = 4; 
$remaining_hours = 6;
?>

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="3" 
     fill="transparent" />  
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" 
     fill="transparent" />
</svg>
<script>
    var path = document.getElementsByTagName("circle")[1];
    var length = path.getTotalLength();
    var total_hours = <?php echo $total_hours ?>;
    var used_hours = <?php echo $used_hours ?>;
    var remaining_hours = <?php echo $remaining_hours ?>;

    var ratio = used_hours/total_hours;
    var used_path_length = (1-ratio) * length;
    path.setAttribute("style", "stroke-dasharray: " + length + "; stroke-dashoffset: " + used_path_length);
    path.setAttribute("transform", "rotate(-90, 50, 50)");
</script>

Red circle is drawn on top of the green (SVG doesn't have z-index as HTML5 DOM eg what get drawn last is put on top of all previous objects). And then its (stroked) path length is adjusted based on your variables.

For clarity it would be enough just to have total and used hours (as variables).