Wie konvertiere ich einen Kreis in einen Pfad?

8

Wenn ich beispielsweise eine SVG-Datei aus dem Illustrator speichere und den Code <circle>ansehe, wird beispielsweise ein Element angezeigt:

<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 als Pfadelement ändern?

Anastasia Vedernikova
quelle
1
Gibt es einen bestimmten Grund warum?
Joonas
Lesen Sie auch create-2-morphable-svgs
joojaa

Antworten:

7

Eine Lösung: In Illustrator, wählen Sie Ihren Kreis und wählen Sie Object> Compound Path> Make.

Hier ist ein schneller Test mit einer Illustrator-Kreisform, dupliziert, die erste ohne Änderungen und die zweite mit 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 durch die Wahl auf eine Grundform wieder zurück Object> Compound Path> 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 des 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 .

Links:

mhulse
quelle
Nun ja, aber leichter zu animieren ist nicht so schön. SVG ist sowieso total verrückt.
Joojaa
@joojaa Ich habe meine Notizen zu SVG-Grundformen tatsächlich entfernt, da dies nicht wirklich der Punkt der OP-Frage war. Ihr Kommentar hat mich motiviert, dieses bisschen aufzugeben und meine Antwort schlanker zu gestalten. Vielen Dank! :)
mhulse
1
Cool! Der Grund, den sie gefragt hat, ist, dass beim Morphing von Symbolen mit SVG-Morpheus ( alexk111.github.io/SVG-Morpheus ) manchmal Fehler auftreten, wenn die Objekte nicht alle <path>Elemente sind. Es funktioniert perfekt, wenn alles ein <path>Element ist. Daher scheint es die beste Lösung für die Verwendung mit SVG-Morpheus zu sein, alles in einen Pfad umzuwandeln.
Trusktr
Funktioniert das für alle Dinge? Angenommen , es gibt <rect>, <polygon>und <line>Elemente, etc: wird diese machen alle von ihnen <path>zu s?
Trusktr
1
@trusktr gute Frage, sieht so aus. Ich habe meine Antwort aktualisiert, um Ihnen einen robusteren Testfall zu zeigen.
mhulse
-1

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 = Position der x-Achse cy = Position der y-Achse r = Radius des Kreises deg = 180/360

Karma Router
quelle
1
Hallo Karma Router und willkommen bei GDSE. Dieser Code funktioniert möglicherweise, aber Sie sollten überlegen, ihn richtig zu formatieren und ein wenig Zeit damit zu 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, dass stattdessen Kreise aus Pfadelementen erstellt werden. 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