Disegno circolare con il percorso dell'arco di SVG

Domanda breve: usando il percorso SVG, possiamo disegnare il 99,99% di un cerchio e questo si presenta, ma quando è il 99.99999999% di un cerchio, allora il cerchio non verrà visualizzato. Come può essere aggiustato?

Il seguente percorso SVG può disegnare il 99,99% di un cerchio: (provalo su http://jsfiddle.net/DFhUF/1381/ e vedi se vedi 4 archi o solo 2 archi, ma nota che se è IE, è renderizzato in VML, non in SVG, ma presenta un problema simile)

M 100 100 a 50 50 0 1 0 0.00001 0

Ma quando è il 99.99999999% di un cerchio, allora nulla mostrerà affatto?

M 100 100 a 50 50 0 1 0 0.00000001 0    

E questo è lo stesso con il 100% di un cerchio (è ancora un arco, no, solo un arco molto completo)

M 100 100 a 50 50 0 1 0 0 0 

Come può essere risolto? Il motivo è che uso una funzione per disegnare una percentuale di un arco e se ho bisogno di "caso speciale" un arco del 99,9999% o del 100% per usare la funzione cerchio, sarebbe un po 'sciocco.

Ancora una volta, un caso di prova su jsfiddle usando RaphaelJS è su http://jsfiddle.net/DFhUF/1381/
(e se è VML su IE 8, anche il secondo cerchio non mostrerà ... devi cambiarlo in 0.01)

Aggiornare:

Questo perché sto realizzando un arco per un punteggio nel nostro sistema, quindi 3,3 punti ottengono 1/3 di un cerchio. 0,5 ottiene mezzo cerchio e 9,9 punti ottengono il 99% di un cerchio. Ma cosa succede se ci sono punteggi che sono 9.99 nel nostro sistema? Devo verificare se è vicino al 99,999% di un cerchio e utilizzare una arcfunzione o una circlefunzione di conseguenza? E che dire di un punteggio di 9.9987? Quale usare? È ridicolo dover sapere quale tipo di punteggi verrà mappato su un "cerchio troppo completo" e passare a una funzione di cerchio, e quando è "un certo 99,9%" di un cerchio o un punteggio di 9.9987, quindi utilizzare la funzione arco .

Lo stesso per l'arco di XAML. Chiudi l'arco del 99,99% con una Ze hai un cerchio!

So che è un po 'tardi nel gioco, ma mi sono ricordato di questa domanda da quando era nuovo e avevo un dillemma simile, e per caso ho trovato la soluzione "giusta", se qualcuno ne sta ancora cercando uno:

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

In altre parole, questo:

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

può essere raggiunto come un percorso con questo:

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

Il trucco è avere due archi, il secondo riprendendo da dove il primo si era interrotto e usando il diametro negativo per tornare al punto di inizio dell'arco originale.

Il motivo per cui non può essere fatto come un cerchio completo in un arco (e sto solo ipotizzando) è perché gli diresti di disegnare un arco da se stesso (diciamo 150.150) a se stesso (150.150), che rende come "oh, sono già lì, nessun arco necessario!".

I vantaggi della soluzione che sto offrendo sono:

1. è facile tradurre da un cerchio direttamente in un percorso e
2. non vi è alcuna sovrapposizione nelle due linee dell'arco (che può causare problemi se si utilizzano marcatori o motivi, ecc.). È una linea pulita e continua, sebbene disegnata in due pezzi.

Niente di tutto ciò avrebbe importanza se solo consentissero ai percorsi di testo di accettare forme. Ma penso che stiano evitando quella soluzione poiché gli elementi di forma come il cerchio non hanno tecnicamente un punto di "inizio".

demo jsfiddle: http://jsfiddle.net/crazytonyi/mNt2g/

Aggiornare:

Se stai usando il percorso come textPathriferimento e desideri che il testo venga visualizzato sul bordo esterno dell'arco, utilizzeresti esattamente lo stesso metodo ma cambi il flag di sweep da 0 a 1 in modo che tratti l'esterno del percorso come superficie anziché all'interno (pensa 1,0a qualcuno seduto al centro e che disegna un cerchio intorno a sé, mentre 1,1come qualcuno che cammina intorno al centro a distanza di raggio e trascina il gesso accanto a loro, se questo è di aiuto). Ecco il codice come sopra ma con la modifica:

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

In riferimento alla soluzione di Anthony, ecco una funzione per ottenere il percorso:

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 approccio totalmente diverso:

Invece di armeggiare con i percorsi per specificare un arco in svg, puoi anche prendere un elemento cerchio e specificare un tratto-dasharray, in pseudo codice:

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

La sua semplicità è il principale vantaggio rispetto al metodo del percorso ad arco multiplo (ad es. Quando si esegue lo script si inserisce un solo valore e il gioco è fatto per qualsiasi lunghezza di arco)

L'arco inizia nel punto più a destra e può essere spostato usando una trasformazione di rotazione.

Nota: Firefox ha un bug strano in cui le rotazioni oltre 90 gradi o più vengono ignorate. Quindi, per iniziare l'arco dall'alto, utilizzare:

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

Adobe Illustrator utilizza curve più bezier come SVG e per i cerchi crea quattro punti. Puoi creare un cerchio con due comandi ad arco ellittico ... ma poi per un cerchio in SVG userei un <circle />:)

È una buona idea usare il comando a due archi per disegnare un cerchio completo.

di solito, utilizzo l'ellisse o l'elemento cerchio per disegnare un cerchio completo.

Basandomi sulle risposte di Anthony e Anton, ho incorporato la capacità di ruotare il cerchio generato senza influire sul suo aspetto generale. Questo è utile se stai usando il percorso per un'animazione e devi controllare da dove inizia.

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

Per quelli come me che cercavano attributi di un'ellisse per la conversione del percorso:

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`

Scritto come una funzione, si presenta così:

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";
}

Queste risposte sono troppo complicate.

Un modo più semplice per farlo senza creare due archi o convertirli in diversi sistemi di coordinate.

Ciò presuppone che l'area della tela abbia larghezza we altezza h.

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

Basta usare la bandiera "arco lungo", quindi la bandiera piena è piena. Quindi rendere gli archi il 99,9999% del cerchio completo. Visivamente è lo stesso. Evita la bandiera sweep semplicemente avviando il cerchio nel punto più a destra del cerchio (un raggio direttamente orizzontale dal centro).

Un altro modo sarebbe quello di utilizzare due curve cubiche di Bezier. Questo è per le persone iOS che usano pocketSVG che non riconosce il parametro arco svg.

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

L'ultima serie di coordinate qui (x, y) è dove vuoi che finisca la linea. Gli altri due sono punti di controllo. (x1, y1) è il punto di controllo per l'inizio della curva e (x2, y2) per il punto finale della curva.

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

ho creato un jsfiddle per farlo qui:

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

collegamento

tutto quello che devi fare è cambiare l'input di console.log e ottenere il risultato in console