Modifier par programme la longueur de trait d'un cercle SVG

Question

J'ai créé un cercle dans Inkscape et désactivé le remplissage pour que seul le trait soit visible, et j'ai défini le point de départ à 45 degrés et le point final à 315 degrés.

Je l'ai ensuite fait pivoter de 90 degrés et voici le résultat final.

<?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>

Son effet de rendu est le suivant :

<?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>

Je veux pouvoir superposer la copie et contrôler la longueur du trait en commençant par le coin inférieur gauche. Par exemple, afficher uniquement 22 % de la longueur totale de la superposition ou afficher un segment de ligne allant d'un point final de 315 degrés à 255,60 degrés ?

Comment pourrions-nous résoudre ce problème (implémenter les contrôles de début et de fin d'Inkscape par programmation et efficacement) ?

Answer 1

Le moyen le plus simple est probablement d'utiliser l'attribut pathLength

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

Changement rinkle- 的第一个值dasharray 表示“百分比”（上例中的 10 使其占据总长度的 10%）。沿着路径移动该段是可能的，感谢负面 rinkle- dashoffset. Ce qui est intéressant avec cette approche, c'est qu'elle peut être utilisée pour « tracer » n'importe quel chemin compact :

Length:
 
10


Offset:
 
20

Answer 2

L'extrait de code suivant prend un pourcentage en entrée, puis calcule les paramètres de la commande Courbe d'arc elliptique dans l'élément A 在<path>. 100% correspond aux trois quarts d'arc.

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)}`);
}

  %