Dibujo circular con la trayectoria del arco de SVG

Pregunta corta: usando la ruta SVG, podemos dibujar el 99.99% de un círculo y aparece, pero cuando es el 99.99999999% de un círculo, entonces el círculo no aparecerá. ¿Cómo se puede arreglar?

La siguiente ruta SVG puede dibujar el 99.99% de un círculo: (pruébelo en http://jsfiddle.net/DFhUF/1381/ y vea si ve 4 arcos o solo 2 arcos, pero tenga en cuenta que si es IE, es renderizado en VML, no SVG, pero tiene el problema similar)

M 100 100 a 50 50 0 1 0 0.00001 0

Pero cuando es 99.99999999% de un círculo, ¿entonces nada se mostrará?

M 100 100 a 50 50 0 1 0 0.00000001 0    

Y eso es lo mismo con el 100% de un círculo (sigue siendo un arco, ¿no es así, solo un arco muy completo?)

M 100 100 a 50 50 0 1 0 0 0 

¿Cómo se puede arreglar eso? La razón es que uso una función para dibujar un porcentaje de un arco, y si necesito un "caso especial" de 99.9999% o 100% de arco para usar la función de círculo, sería una tontería.

Nuevamente, un caso de prueba en jsfiddle usando RaphaelJS está en http://jsfiddle.net/DFhUF/1381/
(y si es VML en IE 8, incluso el segundo círculo no se mostrará ... debe cambiarlo a 0,01)

Actualizar:

Esto se debe a que estoy representando un arco para una puntuación en nuestro sistema, por lo que 3.3 puntos obtienen 1/3 de un círculo. 0.5 obtiene medio círculo, y 9.9 puntos obtienen el 99% de un círculo. Pero, ¿qué pasa si hay puntajes de 9.99 en nuestro sistema? ¿Tengo que verificar si está cerca del 99.999% de un círculo y usar una arcfunción o una circlefunción en consecuencia? Entonces, ¿qué pasa con una puntuación de 9.9987? ¿Cuál usar? Es ridículo necesitar saber qué tipo de puntajes se asignarán a un "círculo demasiado completo" y cambiar a una función de círculo, y cuando sea "un cierto 99.9%" de un círculo o un puntaje de 9.9987, use la función de arco .

Lo mismo para el arco de XAML. ¡Solo cierra el arco del 99,99% con Zay tienes un círculo!

Sé que es un poco tarde en el juego, pero recordé esta pregunta de cuando era nuevo y tenía un dilema similar, y accidentalmente encontré la solución "correcta", si alguien todavía está buscando una:

<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 otras palabras, esto:

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

se puede lograr como un camino con esto:

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

El truco consiste en tener dos arcos, el segundo retomando donde quedó el primero y usando el diámetro negativo para volver al punto de inicio del arco original.

La razón por la que no se puede hacer como un círculo completo en un arco (y solo estoy especulando) es porque le diría que dibuje un arco de sí mismo (digamos 150,150) para sí mismo (150,150), que representa como "¡oh, ya estoy allí, no es necesario un arco!".

Los beneficios de la solución que estoy ofreciendo son:

1. es fácil traducir de un círculo directamente a un camino, y
2. no hay superposición en las dos líneas de arco (lo que puede causar problemas si está utilizando marcadores o patrones, etc.). Es una línea continua limpia, aunque dibujada en dos piezas.

Nada de esto importaría si solo permitieran que las rutas de texto acepten formas. Pero creo que están evitando esa solución ya que los elementos de forma como el círculo técnicamente no tienen un punto de "inicio".

Demostración de jsfiddle: http://jsfiddle.net/crazytonyi/mNt2g/

Actualizar:

Si está utilizando la ruta para una textPathreferencia y desea que el texto se represente en el borde exterior del arco, usaría el mismo método exacto pero cambiaría el indicador de barrido de 0 a 1 para que trate el exterior del camino como la superficie en lugar del interior (piense 1,0como alguien sentado en el centro y dibujando un círculo a su alrededor, mientras 1,1que alguien caminando por el centro a una distancia de radio y arrastrando su tiza a su lado, si eso es de ayuda). Aquí está el código como arriba pero con el cambio:

<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
    "
/>

En referencia a la solución de Anthony, aquí hay una función para obtener el camino:

function circlePath(cx, cy, r){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}

Un enfoque totalmente diferente:

En lugar de jugar con rutas para especificar un arco en svg, también puede tomar un elemento circular y especificar un trazo-dasharray, en pseudocódigo:

with $score between 0..1, and pi = 3.141592653589793238

$length = $score * 2 * pi * $r
$max = 7 * $r  (i.e. well above 2*pi*r)

<circle r="$r" stroke-dasharray="$length $max" />

Su simplicidad es la principal ventaja sobre el método de ruta de arco múltiple (p. Ej., Al crear scripts solo se conecta un valor y ya está listo para cualquier longitud de arco)

El arco comienza en el punto más a la derecha y se puede desplazar usando una transformación de rotación.

Nota: Firefox tiene un error extraño en el que se ignoran las rotaciones de más de 90 grados o más. Entonces, para comenzar el arco desde arriba, use:

<circle r="$r" transform="rotate(-89.9)" stroke-dasharray="$length $max" />

Adobe Illustrator utiliza curvas bezier como SVG, y para círculos crea cuatro puntos. Puede crear un círculo con dos comandos de arco elíptico ... pero luego, para un círculo en SVG, usaría un <circle />:)

Es una buena idea usar dos comandos de arco para dibujar un círculo completo.

por lo general, uso elipse o elemento circular para dibujar un círculo completo.

Sobre la base de las respuestas de Anthony y Anton, incorporé la capacidad de rotar el círculo generado sin afectar su apariencia general. Esto es útil si está utilizando la ruta para una animación y necesita controlar dónde comienza.

function(cx, cy, r, deg){
    var theta = deg*Math.PI/180,
        dx = r*Math.cos(theta),
        dy = -r*Math.sin(theta);
    return "M "+cx+" "+cy+"m "+dx+","+dy+"a "+r+","+r+" 0 1,0 "+-2*dx+","+-2*dy+"a "+r+","+r+" 0 1,0 "+2*dx+","+2*dy;
}

Para aquellos como yo que buscaban atributos de elipse para la conversión de ruta:

const ellipseAttrsToPath = (rx,cx,ry,cy) =>
`M${cx-rx},${cy}a${rx},${ry} 0 1,0 ${rx*2},0a${rx},${ry} 0 1,0 -${rx*2},0`

Escrito como una función, se ve así:

function getPath(cx,cy,r){
  return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}

Estas respuestas son demasiado complicadas.

Una forma más sencilla de hacer esto sin crear dos arcos o convertirlos a diferentes sistemas de coordenadas.

Esto supone que su área de lienzo tiene ancho wy alto h.

`M${w*0.5 + radius},${h*0.5}
 A${radius} ${radius} 0 1 0 ${w*0.5 + radius} ${h*0.5001}`

Simplemente use la bandera de "arco largo", para que se llene la bandera completa. Luego haga que los arcos sean 99.9999% del círculo completo. Visualmente es lo mismo. Evite la bandera de barrido simplemente comenzando el círculo en el punto más a la derecha del círculo (un radio directamente horizontal desde el centro).

Otra forma sería usar dos curvas Cubic Bezier. Eso es para personas con iOS que usan pocketSVG que no reconoce el parámetro svg arc.

C x1 y1, x2 y2, xy (o c dx1 dy1, dx2 dy2, dx dy)

El último conjunto de coordenadas aquí (x, y) es donde desea que termine la línea. Los otros dos son puntos de control. (x1, y1) es el punto de control para el inicio de su curva, y (x2, y2) para el punto final de su curva.

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />

Hice un jsfiddle para hacerlo aquí:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}

function describeArc(x, y, radius, startAngle, endAngle){

var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);

var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");

return d;       
}
console.log(describeArc(255,255,220,134,136))

enlace

todo lo que necesita hacer es cambiar la entrada de console.log y obtener el resultado en la consola