Dibuja un círculo hueco en SVG

Question

No estoy seguro de cómo dibujar un círculo hueco en SVG.

Me gustaría una forma de anillo llena de un color y luego tener un contorno negro.

La forma en que pensé hacerlo fue tener 2 círculos, uno con un radio más pequeño que el otro. El problema es que cuando los llevo, ¿cómo hago que el círculo más pequeño tenga el mismo color de relleno que en el que se encuentra?

Answer 1

Simplemente use fill="none" y solo se dibujará stroke (esquema).

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" /> 
 
</svg>

o esto si quieres dos colores:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="none" /> 
 
    <circle cx="100" cy="50" r="39" stroke="red" stroke-width="2" fill="none" /> 
 
</svg>

Answer 2

Ésta es la forma de rosquilla clásico No estoy seguro de si está intentando para lograr esto con SVG estándar o JavaScript que produce SVG El objetivo se puede lograr mediante la inclusión de una orden relativa "moveto" en una sola definición de la ruta

ir aquí http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2

y haga clic en "agujeros de donuts" en el lado derecho de los ejemplos interactivos. Como mínimo, puede ver la definición de ruta que creó la dona roja.

Answer 3

Gracias a Chasbeen, descubrí cómo hacer un verdadero anillo/donut en SVG. Tenga en cuenta que el círculo exterior en realidad no está cerrado, lo cual solo es aparente cuando usa un trazo. Muy útil cuando tiene muchos anillos concéntricos, especialmente si son interactivos (por ejemplo, con comandos CSS hover).

Para el comando sorteo ...

M cx, cy // Move to center of ring 
m 0, -outerRadius // Move to top of ring 
a outerRadius, outerRadius, 0, 1, 0, 1, 0 // Draw outer arc, but don't close it 
Z // default fill-rule:even-odd will help create the empty innards 
m 0 outerRadius-innerRadius // Move to top point of inner radius 
a innerRadius, innerRadius, 0, 1, 1, -1, 0 // Draw inner arc, but don't close it 
Z // Close the inner ring. Actually will still work without, but inner ring will have one unit missing in stroke  

JSFiddle - Contiene varios anillos y CSS para simular la interactividad. Tenga en cuenta el inconveniente de que falta un único píxel en el punto de inicio (en la parte superior), que solo está allí si agrega un trazo.

Editar: Encontrado este SO answer (y mejor aún, this answer), que describe cómo obtener las entrañas vacías en generales

Answer 4

obras respuesta de MDragon00, pero los círculos interior y exterior no están perfectamente alineados (por ejemplo, centrado).

Modifiqué su enfoque un poco, usando 4 arcos semicirculares (2 externos y 2 interiores en dirección invertida) para obtener la alineación exactamente correcta.

<svg width="100" height="100"> 
 
    <path d="M 50 10 A 40 40 0 1 0 50 90 A 40 40 0 1 0 50 10 Z M 50 30 A 20 20 0 1 1 50 70 A 20 20 0 1 1 50 30 Z" fill="#0000dd" stroke="#00aaff" stroke-width="3" /> 
 
</svg> 
 

 
<!-- 
 

 
Using this path definition as d: 
 

 
M centerX (centerY-outerRadius) 
 
A outerRadius outerRadius 0 1 0 centerX (centerY+outerRadius) 
 
A outerRadius outerRadius 0 1 0 centerX (centerY-outerRadius) 
 
Z 
 
M centerX (centerY-innerRadius) 
 
A innerRadius innerRadius 0 1 1 centerX (centerY+innerRadius) 
 
A innerRadius innerRadius 0 1 1 centerX (centerY-innerRadius) 
 
Z 
 

 
-->

Answer 5

Aquí es una rutina para crear un arco Bézier que es lo más cerca que hace que no hay probabilidades de un círculo. Necesitas cuatro de ellos en un camino para un círculo completo.

BezierCurve BezierArc(double ox, double oy, double r, double thetaa, double thetab) 
    { 
     double theta; 
     double cpx[4]; 
     double cpy[4]; 
     int i; 
     int sign = 1; 

     while (thetaa > thetab) 
      thetab += 2 * Pi; 
     theta = thetab - thetaa; 
     if (theta > Pi) 
     { 
      theta = 2 * Pi - theta; 
      sign = -1; 
     } 
     cpx[0] = 1; 
     cpy[0] = 0; 
     cpx[1] = 1; 
     cpy[1] = 4.0/3.0 * tan(theta/4); 
     cpx[2] = cos(theta) + cpy[1] * sin(theta); 
     cpy[2] = sin(theta) - cpy[1] * cos(theta); 
     cpx[3] = cos(theta); 
     cpy[3] = sin(theta); 
     cpy[1] *= sign; 
     cpy[2] *= sign; 
     cpy[3] *= sign; 

     for (i = 0; i < 4; i++) 
     { 
      double xp = cpx[i] * cos(thetaa) + cpy[i] * -sin(thetaa); 
      double yp = cpx[i] * sin(thetaa) + cpy[i] * cos(thetaa); 
      cpx[i] = xp; 
      cpy[i] = yp; 
      cpx[i] *= r; 
      cpy[i] *= r; 
      cpx[i] += ox; 
      cpy[i] += oy; 
     } 

     return BezierCurve({cpx[0], cpy[0]},{cpx[1], cpy[1]}, {cpx[2], cpy[2]}, {cpx[3], cpy[3]}); 
    }