Cercle de dessin SVG de l'arc chemin

Question

La suite SVG chemin peut tirer de 99,99% de cercle: (essayez sur http://jsfiddle.net/DFhUF/46/ et voir si vous voyez 4 arcs ou 2, mais notez que si c'est IE, il est rendu dans VML, pas de SVG, mais qui ont le même problème)

M 100 100 a 50 50 0 1 0 0.00001 0

Mais quand il est 99.99999999% d'un cercle, alors rien ne montrer à tous?

M 100 800 a 50 50 0 1 0 0.00000001 0    

Et c'est la même chose avec 100% d'un cercle (c'est toujours un arc, n'est-ce pas, juste un très complète de l'arc)

M 100 800 a 50 50 0 1 0 0 0 

Comment cela peut-il être fixé? La raison est que j'utilise une fonction pour dessiner un pourcentage d'un arc, et si j'ai besoin de "cas particulier" un 99.9999% ou 100% de l'arc à utiliser le cercle de la fonction, ce serait un peu idiot.

Encore une fois, un cas de test sur jsfiddle à l'aide de RaphaelJS est à http://jsfiddle.net/DFhUF/46/
(et si c'est VML sur IE 8, même le deuxième cercle de ne pas s'afficher... à vous de les changer à 0,01)

---

Mise à jour:

C'est parce que je suis rendu un arc pour un score dans notre système, afin de 3,3 points 1/3 d'un cercle. 0.5 obtient un demi-cercle, et de 9,9 points de 99% d'un cercle. Mais que faire si il ya des notes qui sont 9.99 dans notre système? Dois-je vérifier si il est proche de 99,999% de un cercle, et l'utilisation d'un arc fonction ou un circle de la fonction en conséquence? Alors qu'un score de 9.9987? Lequel utiliser? Il est ridicule de besoin de savoir quel type de points de la carte pour un "trop complet cercle" et de passer à un cercle de fonction, et quand il est "un certain à 99,9%" d'un cercle ou d'un 9.9987 score, puis utiliser la fonction arc.

Answer 1

Je sais c'est un peu tard dans le jeu, mais je me suis souvenu de cette question à partir de quand il était nouveau et j'ai eu un semblable dillemma, et j'ai accidentellement trouvé la "bonne" solution, si quelqu'un est toujours à la recherche d'un:

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

En d'autres termes, ceci:

<circle cx="100" cy="100" r="75" />

peut être réalisé dans un chemin avec ceci:

  <path 
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
  />

Le truc est d'avoir deux arcs, le second reprenant là où le premier gauche et en utilisant le négatif de diamètre pour revenir à l'origine, l'arc point de départ.

La raison pour laquelle il ne peut pas être fait comme un cercle complet dans un arc (et je suis juste spéculer) c'est parce que vous seriez en disant qu'il dessine un arc à partir de lui-même (disons 150,150) à lui-même (150,150), qui elle rend comme "oh, je suis déjà là, pas d'arc!".

Les avantages de la solution que je vous propose sont:

1. il est facile de traduire à partir d'un cercle directement à un chemin, et
2. il n'y a pas de chevauchement entre les deux arc lignes (ce qui peut causer des problèmes si vous utilisez des marqueurs ou des modèles, etc). C'est un nettoyage de ligne continue, quoique tiré en deux morceaux.

Rien de tout cela aurait de l'importance s'ils permettent textpaths à accepter des formes. Mais je pense qu'ils sont d'éviter qu'une solution, car la forme des éléments comme le cercle n'est pas techniquement ont une "start".

jsfiddle démo: http://jsfiddle.net/crazytonyi/mNt2g/

Mise à jour:

Si vous utilisez le chemin d'accès pour un textPath de référence et vous souhaitez le texte pour le rendre sur le bord extérieur de l'arc, vous devez utiliser exactement la même méthode, mais le changement le sweep-drapeau de 0 à 1, de sorte qu'il traite de l'extérieur de la trajectoire de la surface au lieu de l'intérieur ( 1,0 comme quelqu'un assis au centre et en dessinant un cercle autour d'eux, tandis que d' 1,1 comme quelqu'un de marcher autour du centre du rayon de la distance et en faisant glisser leurs craie à côté d'eux, si c'est toute l'aide). Voici le code que ci-dessus mais avec le changement:

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,1 (r * 2),0
    a r,r 0 1,1 -(r * 2),0
    "
/>

Answer 2

Même pour XAML de l'arc. Il suffit de fermer les 99,99% de l'arc avec un Z et que vous avez un cercle!

Answer 3

Adobe Illustrator utilise des courbes de bézier comme SVG, et pour les cercles, il crée quatre points. Vous pouvez créer un cercle avec deux arc elliptique commandes...mais pour un cercle en SVG je voudrais utiliser un <circle /> :)

Answer 4

C'est une bonne idée que l'aide de deux arc de commande pour dessiner un cercle complet.

habituellement, j'utilise l'ellipse ou de cercle élément à dessiner un cercle complet.