Wie konvertiert man einen Kreis in einen Pfad?

Wenn ich zum Beispiel ein SVG von Illustrator speichere und den Code ansehe, sehe ich ein <circle>Element, zum Beispiel

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

aber ich möchte, dass es ein <path>Element ist, kein <circle>Element.

Wie kann ich es in ein Pfadelement ändern?

Irgendein bestimmter Grund warum?

Antworten (2)

Eine Lösung: Wählen Sie in Illustrator Ihren Kreis aus und wählen Sie Object> Compound Path> Make.

Hier ist ein schneller Test mit einer Kreisform aus Illustrator, dupliziert, die erste ohne Änderungen und die zweite mit angewendetem zusammengesetztem Pfad:

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

Hinweis: Sie können zu einer Grundform zurückkehren, indem Sie Object> Compound Path> wählen Release.

Ein Testfall:

Vor dem Anwenden des zusammengesetzten Pfads:

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

Nach dem Anwenden eines zusammengesetzten Pfads auf jede einzelne Form:

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

Die oben gerenderten SVG-Dateien finden Sie hier .

Verbindungen:

Nun ja, aber einfacher zu animieren ist nicht unbedingt der Fall. SVG ist sowieso total hirntot.
@joojaa Ich habe meine Notizen zu SVG-Grundformen tatsächlich entfernt, da dies nicht wirklich der Sinn der Frage des OP war. Ihr Kommentar hat mich dazu motiviert, diesen Teil fallen zu lassen und meine Antwort schlanker zu gestalten. Vielen Dank! :)
Kühl! Der Grund, warum sie fragte, war, dass es beim Morphen von Symbolen mit SVG-Morpheus ( alexk111.github.io/SVG-Morpheus ) manchmal zu Störungen kam, wenn die Objekte nicht alle <path>Elemente waren. Es funktioniert perfekt, wenn alles ein <path>Element ist, daher scheint die Konvertierung von allem in einen Pfad die beste Lösung für die Verwendung mit SVG-Morpheus zu sein.
Funktioniert das für alle Dinge? Angenommen, es gibt <rect>, <polygon>, und <line>Elemente usw.: Werden sie dadurch alle zu <path>s?
@trusktr gute Frage, sieht so aus. Ich habe meine Antwort aktualisiert, um Ihnen einen robusteren Testfall zu zeigen.
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 = x-Achsenposition cy = y-Achsenposition r = Kreisradius deg = 180/360

Hallo Karma Router und willkommen bei GDSE. Dieser Code könnte funktionieren, aber Sie sollten in Betracht ziehen, ihn richtig zu formatieren, und ein wenig Zeit damit verbringen, zu beschreiben, was er ist und wie Sie ihn verwenden würden. Versuchen Sie, es aus der Sicht des OP zu sehen. Sie exportieren eine SVG-Datei aus Illustrator und möchten stattdessen Kreise aus Pfadelementen erstellen. Wie würde das OP diesen Code verwenden, um seine Datei zu ändern? Können sie es einfach in einem Browser ausführen, wie es ist? Wie speichere ich die geänderte Datei?
@Wolff Ich stimme dir zu, aber ich habe die Antwort des Typen positiv bewertet, weil dies impliziert, dass der Benutzer sachkundig ist und jeder Nicht-Anfänger-Benutzer wissen würde, wie man dies verwendet.
Wie konvertiert man einen Kreis in einen Pfad?
AntwortenHierDatenschutz-Bestimmungen1y, 0v