Bagaimana untuk Mencipta Bar Peratusan Pekeliling Kemajuan Menggunakan SVG?

Mencipta Bar Peratusan Pekeliling Kemajuan

Permintaan adalah untuk penunjuk kemajuan jejari yang memaparkan peratusan di dalam bulatan. Untuk mencapai matlamat ini, kedua-dua pendekatan berasaskan imej dan berasaskan CSS wujud.

Pendekatan Berasaskan Imej

Imej bulatan kuning boleh digunakan. Walau bagaimanapun, jika niatnya adalah untuk mencipta bar kemajuan dinamik, CSS menawarkan penyelesaian yang lebih sesuai.

Pendekatan Berasaskan CSS menggunakan SVG

SVG ialah alat serba boleh untuk mencipta bentuk yang kompleks, termasuk yang bulat. Berikut ialah pendekatan berasaskan SVG untuk mencipta bar kemajuan:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="251.2,0"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text>

Daharray strok dianimasikan dan peratusannya dikemas kini menggunakan jQuery:

var count = $('#count');
$({Counter: 0}).animate({Counter: count.text()}, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

DEMO

[Bar Kemajuan Radial](https://i.sstatic.net/cK5lv.jpg)

Pendekatan ini menyediakan penunjuk kemajuan yang dinamik dan bergaya yang boleh disesuaikan dan disepadukan dengan mudah ke dalam reka bentuk web.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Peratusan Pekeliling Kemajuan Menggunakan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!