Desenho em círculo com o caminho do arco do SVG

Pergunta curta: usando o caminho SVG, podemos desenhar 99,99% de um círculo e ele aparece, mas quando é 99,99999999% de um círculo, o círculo não aparece. Como pode ser consertado?

O seguinte caminho SVG pode desenhar 99,99% de um círculo: (tente em http://jsfiddle.net/DFhUF/1381/ e veja se você vê 4 arcos ou apenas 2 arcos, mas observe que, se for o IE, é processado em VML, não SVG, mas tem o mesmo problema)

M 100 100 a 50 50 0 1 0 0.00001 0

Mas quando é 99,99999999% de um círculo, nada será mostrado?

M 100 100 a 50 50 0 1 0 0.00000001 0    

E é o mesmo com 100% de um círculo (ainda é um arco, não é, apenas um arco muito completo)

M 100 100 a 50 50 0 1 0 0 0 

Como isso pode ser corrigido? O motivo é que eu uso uma função para desenhar uma porcentagem de um arco, e se eu precisar "aplicar um caso especial" a um arco de 99,9999% ou 100% para usar a função de círculo, isso seria meio bobo.

Novamente, um caso de teste no jsfiddle usando o RaphaelJS está em http://jsfiddle.net/DFhUF/1381/
(e se for VML no IE 8, mesmo o segundo círculo não será exibido ... é necessário alterá-lo para 0,01)

Atualizar:

Isso ocorre porque eu estou renderizando um arco para uma pontuação em nosso sistema, então 3,3 pontos recebem 1/3 de um círculo. 0,5 obtém meio círculo e 9,9 pontos obtêm 99% de um círculo. Mas e se houver pontuações de 9,99 no nosso sistema? Preciso verificar se está próximo a 99,999% de um círculo e usar uma arcfunção ou uma circlefunção de acordo? Então, que tal uma pontuação de 9.9987? Qual usar? É ridículo precisar saber que tipo de pontuação será mapeada para um "círculo muito completo" e mudar para uma função de círculo. Quando houver "um certo 99,9%" de um círculo ou uma pontuação de 9.9987, use a função de arco. .

O mesmo para o arco do XAML. Basta fechar o arco de 99,99% com um Ze você terá um círculo!

Eu sei que é um pouco tarde no jogo, mas lembrei-me desta pergunta de quando era nova e eu tinha um dilema semelhante e acidentalmente encontrei a solução "certa", se alguém ainda estivesse procurando por uma:

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

Em outras palavras, isso:

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

pode ser alcançado como um caminho com isso:

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

O truque é ter dois arcos, o segundo pegando onde o primeiro parou e usando o diâmetro negativo para voltar ao ponto inicial do arco original.

A razão pela qual isso não pode ser feito como um círculo completo em um arco (e estou apenas especulando) é porque você estaria dizendo para desenhar um arco de si mesmo (digamos 150.150) para si mesmo (150.150), o que ele renderiza como "oh, eu já estou lá, não é necessário!".

Os benefícios da solução que estou oferecendo são:

1. é fácil traduzir de um círculo diretamente para um caminho e
2. não há sobreposição nas duas linhas do arco (o que pode causar problemas se você estiver usando marcadores ou padrões, etc.). É uma linha contínua limpa, embora desenhada em duas partes.

Nada disso importaria se eles permitissem apenas que os caminhos de texto aceitassem formas. Mas acho que eles estão evitando essa solução, já que elementos de forma como círculo não têm tecnicamente um ponto de "início".

Demonstração do jsfiddle: http://jsfiddle.net/crazytonyi/mNt2g/

Atualizar:

Se você estiver usando o caminho para uma textPathreferência e desejar que o texto seja renderizado na borda externa do arco, use exatamente o mesmo método, mas altere o sinalizador de varredura de 0 para 1 para que ele trate a parte externa do caminho como a superfície em vez do interior (pense 1,0em alguém sentado no centro e desenhando um círculo em volta de si, enquanto 1,1alguém andando pelo centro a uma distância de raio e arrastando o giz ao lado deles, se isso for de alguma ajuda). Aqui está o código acima, mas com a alteração:

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

Em referência à solução de Anthony, aqui está uma função para obter o caminho:

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

Uma abordagem totalmente diferente:

Em vez de mexer nos caminhos para especificar um arco no svg, você também pode pegar um elemento circle e especificar um stroke-dasharray, no pseudo-có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" />

Sua simplicidade é a principal vantagem sobre o método de vários caminhos de arco (por exemplo, ao criar scripts, você apenas insere um valor e está pronto para qualquer comprimento de arco)

O arco começa no ponto mais à direita e pode ser deslocado usando uma transformação de rotação.

Nota: O Firefox tem um bug estranho, onde rotações acima de 90 graus ou mais são ignoradas. Então, para iniciar o arco de cima, use:

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

O Adobe Illustrator usa curvas mais bege como SVG e, para círculos, cria quatro pontos. Você pode criar um círculo com dois comandos de arco elíptico ... mas para um círculo no SVG eu usaria um <circle />:)

É uma boa ideia usar o comando two arc para desenhar um círculo completo.

geralmente, uso elipse ou elemento de círculo para desenhar um círculo completo.

Com base nas respostas de Anthony e Anton, incorporei a capacidade de girar o círculo gerado sem afetar sua aparência geral. Isso é útil se você estiver usando o caminho para uma animação e precisar controlar onde ela começa.

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 aqueles como eu, que estavam procurando por uma elipse atribui à conversão de caminho:

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 uma função, fica assim:

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

Essas respostas são muito complicadas.

Uma maneira mais simples de fazer isso sem criar dois arcos ou converter em diferentes sistemas de coordenadas.

Isso pressupõe que sua área da tela tenha largura we altura h.

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

Basta usar a bandeira "arco longo", para que a bandeira completa seja preenchida. Então faça dos arcos 99,9999% o círculo completo. Visualmente é o mesmo. Evite a bandeira de varredura apenas iniciando o círculo no ponto mais à direita do círculo (um raio diretamente horizontal do centro).

Outra maneira seria usar duas curvas de Bezier cúbicas. Isso é para o pessoal do iOS que usa pocketSVG, que não reconhece o parâmetro svg arc.

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

O último conjunto de coordenadas aqui (x, y) é onde você deseja que a linha termine. Os outros dois são pontos de controle. (x1, y1) é o ponto de controle para o início da sua curva e (x2, y2) para o ponto final da sua curva.

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

Eu fiz um jsfiddle para fazer aqui:

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

ligação

tudo o que você precisa fazer é alterar a entrada do console.log e obter o resultado no console