如何根據數據庫中的值給 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，例如最后繪制的內容放在所有先前對象的頂部）。 然后根據您的變量調整其（描邊）路徑長度。

為清楚起見，只需擁有總小時數和使用小時數（作為變量）就足夠了。