Tukar panjang lejang bulatan SVG secara pemprograman

Question

Saya mencipta bulatan dalam Inkscape dan mematikan isian supaya hanya lejang yang kelihatan, dan menetapkan titik mula kepada 45 darjah dan titik akhir kepada 315 darjah.

Saya kemudian memutarnya 90 darjah dan ini adalah keputusan akhir.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg">
 <path transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" opacity=".55814" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.583"/>
</svg>

Kesan renderingnya adalah seperti berikut:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg">
 <path transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" opacity=".55814" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.583"/>
</svg>

Saya mahu dapat menindih salinan dan mengawal panjang lejang bermula dari sudut kiri bawah. Sebagai contoh, hanya tunjukkan 22% daripada jumlah panjang tindanan atau tunjukkan segmen garisan dari titik akhir 315 darjah hingga 255.60 darjah?

Bagaimanakah kami akan menyelesaikan masalah ini (melaksanakan kawalan permulaan dan penamat inkscape secara terprogram dan cekap)?

Answer 1

Mungkin cara paling mudah ialah menggunakan atribut pathLength

pathlength="100" stroke-dasharray="10 100"

Ubah rinkle- 的第一个值dasharray 表示“百分比”（上例中的 10 使其占据总长度的 10%）。沿着路径移动该段是可能的，感谢负面 rinkle- dashoffset. Perkara yang menarik tentang pendekatan ini ialah ia boleh digunakan untuk "mengesan" mana-mana laluan padat:

Length:
 
10


Offset:
 
20

Answer 2

Coretan kod berikut mengambil peratusan sebagai input dan kemudian mengira parameter arahan Lengkung Arka Eliptik dalam elemen A 在<path>. 100% sepadan dengan tiga perempat daripada lengkok.

var path = document.getElementById("path");
function draw(v) {
  var theta = v * Math.PI * 0.015;
  var large = theta <= Math.PI ? 0 : 1;
  path.setAttribute("d", `M1,0 A1,1 0 ${large} 1 ${Math.cos(theta)},${Math.sin(theta)}`);
}

  %