¿Cómo convertir un círculo en un camino?

Por ejemplo, cuando guardo un SVG de Illustrator y veo el código, veo un <circle>elemento, por ejemplo,

<circle cx="131.6" cy="292.3" r="311.7" />

pero me gustaría que fuera un <path>elemento, no un <circle>elemento.

¿Cómo puedo cambiarlo para que sea un elemento de ruta?

¿Alguna razón específica por qué?

Respuestas (2)

Una solución: en Illustrator, seleccione su círculo y elija Object> Compound Path> Make.

Aquí hay una prueba rápida usando una forma de círculo de Illustrator, duplicada, la primera sin modificaciones y la segunda con trazado compuesto aplicado:

<circle class="cls-1" cx="466.5" cy="184.5" r="117.5"/>
<path class="cls-1" d="M320,190.5A121.5,121.5,0,1,1,198.5,69,121.5,121.5,0,0,1,320,190.5Z" transform="translate(-77 -69)"/>

Nota: puede volver a una forma básica eligiendo Object> Compound Path> Release.

Un caso de prueba:

Antes de aplicar la ruta compuesta:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 157.41935">
  <defs>
    <style>
      .a {
        fill: #ed2024;
      }

      .b {
        fill: none;
        stroke: #ed2024;
        stroke-miterlimit: 10;
        stroke-width: 40px;
      }
    </style>
  </defs>
  <title>before</title>
  <rect class="a" width="100" height="100"/>
  <rect class="a" x="127.54853" width="100" height="100" rx="12" ry="12"/>
  <circle class="a" cx="305.09706" cy="50" r="50"/>
  <polygon class="a" points="482.646 50 457.646 93.301 407.646 93.301 382.646 50 407.646 6.699 457.646 6.699 482.646 50"/>
  <polygon class="a" points="560.194 12.169 592.212 0.8 591.278 34.721 612 61.615 579.405 71.209 560.194 99.2 540.983 71.209 508.388 61.615 529.111 34.721 528.176 0.8 560.194 12.169"/>
  <line class="b" y1="137.41935" x2="612" y2="137.41935"/>
</svg>

Después de aplicar la ruta compuesta a cada forma individual:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 157.41935">
  <defs>
    <style>
      .a {
        fill: #ed2024;
      }

      .b {
        fill: none;
        stroke: #ed2024;
        stroke-miterlimit: 10;
        stroke-width: 40px;
      }
    </style>
  </defs>
  <title>after</title>
  <path class="a" d="M100,100H0V0H100Z"/>
  <path class="a" d="M215.54853,100h-76a12.03528,12.03528,0,0,1-12-12V12a12.03528,12.03528,0,0,1,12-12h76a12.03528,12.03528,0,0,1,12,12V88A12.03528,12.03528,0,0,1,215.54853,100Z"/>
  <path class="a" d="M355.09706,50a50,50,0,1,1-50-50A50,50,0,0,1,355.09706,50Z"/>
  <path class="a" d="M482.6456,50l-25,43.30127h-50L382.6456,50l25-43.30127h50Z"/>
  <path class="a" d="M560.19413,12.16931,592.21192.8l-.93427,33.92058L612,61.61455l-32.5952,9.59476L560.19413,99.2,540.98346,71.20931l-32.5952-9.59476,20.72235-26.894L528.17634.8Z"/>
  <path class="b" d="M0,137.41935H612"/>
</svg>

Los archivos svg renderizados anteriores se pueden encontrar aquí .

Enlaces:

Bueno, sí, pero más fácil de animar no es necesario. SVG es totalmente insensato de todos modos.
@joojaa De hecho, eliminé mis notas sobre las formas básicas de SVG, ya que no era realmente el punto de la pregunta del OP. Su comentario me motivó a deshacerme de ese bit y agilizar mi respuesta. ¡Gracias! :)
¡Enfriar! La razón por la que preguntó es porque al transformar iconos con SVG-Morpheus ( alexk111.github.io/SVG-Morpheus ) a veces fallaba cuando los objetos no eran todos <path>elementos. Funciona perfectamente cuando todo es un <path>elemento, por lo que convertir todo en una ruta parece ser la mejor solución para usar con SVG-Morpheus.
¿Esto funciona para todas las cosas? Supongamos que hay elementos <rect>, <polygon>y , <line>etc.: ¿esto hará que todos ellos <path>también sean s?
@trusktr buena pregunta, parece que sí. He actualizado mi respuesta para mostrarle un caso de prueba más sólido.
var circle = doc.getElementsByTagName('circle');

 var convertSvgCircleToPath = 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;

 }

 convertSvgCircleToPath(circle.getAttribute('cx'), circle.getAttribute('cy'), circle.getAttribute('r'), 180);

cx = posición del eje x cy = posición del eje y r = radio del círculo grados = 180/360

Hola ruta karma y bienvenido a GDSE. Este código podría funcionar, pero debe considerar formatearlo correctamente y dedicar un poco de tiempo a describir qué es y cómo lo usaría. Intenta verlo desde el punto de vista del OP. Exportan un archivo svg de Illustrator y quieren que los círculos se hagan a partir de elementos de ruta. ¿Cómo usaría el OP este código para cambiar su archivo? ¿Pueden simplemente ejecutarlo en un navegador como es? ¿Cómo guardar el archivo modificado?
@Wolff Estoy de acuerdo con usted, pero voté a favor de la respuesta del tipo porque implica que el usuario tiene conocimientos y cualquier usuario no principiante sabría cómo usar esto.
¿Cómo convertir un círculo en un camino?
RespuestasAquíPolítica de privacidad1y, 0v