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

Question

PHP 值

$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" />

现在如何根据 php 值给出圆形动态行程？ 谢谢，对不起，我对 web 开发完全陌生。 或者如何使用圆形进度条执行此操作（请参见附件示例）

Answer 1

无需使用更高级的代码（但更简单地创建“甜甜圈”弧，例如使用 D3.js 库等），您可以使用 javascript 和基本 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>

红色圆圈绘制在绿色顶部（SVG 没有 z-index 作为 HTML5 DOM，例如最后绘制的内容放在所有先前对象的顶部）。 然后根据您的变量调整其（描边）路径长度。

为清楚起见，只需拥有总小时数和使用小时数（作为变量）就足够了。