Cercle de dessin SVG de l'arc chemin
Suivantes 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 d'un circle
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.
- bien sûr qu'il fonctionne... c'est de 99% d'un cercle (un peu gros). Le cas est qu'il peut tirer de 98%, 99%, 99,99% des un cercle, mais pas 99.9999999% ou 100%
- Deux de ces liens vont à la même chose, et il fonctionne très bien dans Safari.
- à droite, le même lien, je veux juste que les gens à voir le cas de test plus tôt, alors j'ai ajouté le lien au début de la question. Droit safari de le faire, c'est gentil... google Chrome et Firefox de ne pas... étrange coz Safari et Chrome sont à la fois Webkit... mais ne SVG moteur dépendent de Webkit?
- Semble bien en Chrome pour moi.
- semble bien, comment? voyez-vous 4 arcs ou 2 arcs? avez-vous même de regarder le code?
- Non, je n'ai pas. Avez-vous le mentionnez, il y avait quatre cercles, ou de leur faire des couleurs différentes, de sorte que les personnes qui aident, vous pouvez le faire plus facilement?
- si vous scannez le code brièvement, vous pouvez dire c'est d'essayer de dessiner 4 arcs... ou, ne pas scanner le code, et il est d'autres personnes de la faute, comme d'habitude
- Vous réalisez que c'est pas à moi de corriger votre code?
- une mise à jour de jsfiddle avec Raphaël inclus comme une bibliothèque, pour obtenir autour de la croix-origine de l'erreur de chargement raphael.js: jsfiddle.net/DFhUF/1381
- codepen.io/dcdev/stylo/upjDy
Vous devez vous connecter pour publier un commentaire.
Même pour XAML de l'arc. Il suffit de fermer les 99,99% de l'arc avec un
Z
et vous avez un cercle!z
à la fin et fait. Vous pouvez avoir à supprimer les zéros, par exemple dans le dernier Chrome, j'ai dû écrire0.0001
pour le faire fonctionner. Si vous êtes à la recherche pour l'endroit où placer la chaîne de chemin, regarde Chemins de MDN.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:
En d'autres termes, ce:
peut être réalisé comme un chemin avec ceci:
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 de l'arc de besoin!".
Les avantages de la solution que je vous propose sont:
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" point.
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 (pensez à1,0
que quelqu'un assis au centre et en dessinant un cercle autour d'eux, tandis que1,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:function circPath(r) { return "m " + (-r) + ", 0 a " + r + "," + r + " 0 1,0 " + (r * 2) + ",0 a " + r + "," + r + " 0 1,0" + (-(r * 2)) + ",0"; }
En référence à Anthony de la solution, voici une fonction pour obtenir le chemin d'accès:
Une approche totalement différente:
Au lieu de jongler avec les chemins de spécifier un arc en svg, vous pouvez également prendre un cercle élément et spécifier un stroke-dasharray, en pseudo code:
Sa simplicité est le principal avantage sur les multiples arc-méthode du chemin (par ex. lorsque le script vous ne branchez une valeur et que vous êtes fait pour toute longueur de l'arc)
L'amorçage de l'arc au point le plus à droite, et peut être déplacé autour de l'aide d'une rotation de transformation.
Note: Firefox a un bogue où les rotations de plus de 90 degrés ou plus sont ignorés. Donc, pour commencer à l'arc à partir du haut, de l'utilisation:
stroke-dasharray="0 10cm 5cm 1000cm"
il est possible d'éviter la transformationAdobe 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 />
🙂circle
, veuillez consulter le mise à Jour dans la question de la place.arc
pour créer un cercle complet à l'aide de la gauche de l'arc et le droit de l'arc? Si l'arc ne peut pas dessiner un cercle complet... pour faire deuxarc
chemins sont nécessaires<circle>
élément même si illustrator montre une à quatre segments de Bézier. Seulement si vous ajustez les poignées ou les ancres t-il à l'exportation comme une<path>
approximation d'un cercle.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.
Écrit comme une fonction, il ressemble à ceci:
<circle>
, vous avez à changer la direction de l'Est, le Sud, l'Ouest, le Nord:"M" + cx + "," + cy + "m" + (r) + ",0" + "a" + r + "," + r + " 0 1,1 " + (-r * 2) + ",0" + "a" + r + "," + r + " 0 1,1 " + (r * 2) + ",0"
L'avantage est questroke-dashoffset
etstartOffset
maintenant de la même façon.Bâtiment sur Anthony et Anton réponses que j'ai intégré la capacité de faire pivoter l'généré cercle sans affecter l'ensemble de l'apparence. Ceci est utile si vous utilisez le chemin d'accès pour une animation et que vous avez besoin de contrôler où il commence.
Pour ceux qui comme moi étaient à la recherche d'une ellipse attributs de chemin de conversion:
Ces réponses sont trop compliquées.
Un moyen plus simple de le faire sans la création de deux arcs ou de convertir dans différents systèmes de coordonnées..
Cela suppose que votre espace de la toile a la largeur
w
et la hauteurh
.Suffit d'utiliser le "arc long" indicateur, l'indicateur est rempli. Ensuite, faire les arcs 99.9999% le cercle complet. Visuellement c'est la même chose. Éviter le sweep drapeau par juste de commencer le cercle au point le plus à droite dans le cercle (un rayon horizontale à partir du centre).
Un autre moyen serait d'utiliser deux les Courbes de Bézier Cubiques. C'est pour iOS les gens à l'aide pocketSVG qui ne reconnaît pas le format svg paramètre arc.
C x1, y1, x2, y2, x y (c dx1 dy1, dx2 dy2, dx, dy)
Le dernier jeu de coordonnées ici (x,y) sont les endroits où vous souhaitez que la ligne à la fin. Les deux autres sont des points de contrôle. (x1,y1) est le point de contrôle pour le début de votre courbe, et (x2,y2) pour le point de fin de votre courbe.
j'ai fait un jsfiddle de le faire ici:
lien
tout ce que vous devez faire est de modifier les entrées de la console.journal et obtenir le résultat dans la console
Ces exemples sont tous trop compliqué!!!!!
Viens de le faire avec es6 modèle de littéraux.
Un moyen plus simple de le faire sans la création de deux arcs..
Cela suppose que votre espace de la toile a la largeur w et de hauteur h.
Suffit d'utiliser le "arc long" indicateur, l'indicateur est rempli. Ensuite, faire les arcs 99.9999% le cercle complet. Visuellement c'est la même chose. Éviter le sweep drapeau par juste de commencer le cercle au point le plus à droite dans le cercle (un rayon horizontale à partir du centre).