Frage an raphael, svg – SVG-Polygon in Pfad konvertieren

22

Ich habe eine ziemlich große SVG-Datei mit administrativen Unterteilungen, mit denen ich in Raphael.JS arbeiten muss (es hat 600 Polygone und Gewichte von 1,2 MB).

Jetzt muss ich diese Polygone in Pfade konvertieren, damit es in Raphael funktioniert. Der großeWerkzeug poly2path tut das, aber es unterstützt keinen Stapelbefehl, so dass die Position jedes Polygons relativ zu den anderen verloren geht.

Kennen Sie ein Tool zum Konvertieren von SVG-Polygonen in Pfade? (Ich habe auch die AI-Datei, die zum Exportieren der SVG verwendet wurde).

Danke vielmals

Wenn Sie @nkb erneut besuchen, akzeptieren Sie bitte Ihre bevorzugte Antwort. halfer

Deine Antwort

4   die antwort
72
Öffnen Sie Ihre SVG in einem Webbrowser.

var polys = document.querySelectorAll('polygon,polyline');
[].forEach.call(polys,convertPolyToPath);

function convertPolyToPath(poly){
  var svgNS = poly.ownerSVGElement.namespaceURI;
  var path = document.createElementNS(svgNS,'path');
  var pathdata = 'M '+poly.getAttribute('points');
  if (poly.tagName=='polygon') pathdata+='z';
  path.setAttribute('d',pathdata);
  poly.parentNode.replaceChild(path,poly);
}

Verwenden Sie die Developer Tools (oder Firebug) des Browsers, um "Als HTML kopieren" (oder SVG kopieren) für das Element zu verwenden und die geänderte Quelle in die Zwischenablage zu kopieren.

In eine neue Datei einfügen und genießen.

Ich habe eine Demo der obigen Methode (leicht modifiziert) auf meiner Website:
http://phrogz.net/svg/convert_polys_to_paths.svg

Auf dieser Seite werden zwei Methoden verwendet. man (wie oben) verwendet stringbasierte Techniken, um die Punkte zu erhalten und zu setzen; Der andere verwendet das SVG-DOM zum Zugreifen auf Punkte und zum Festlegen von Pfadbefehlen.

Wie in den Kommentaren von @Interactive vermerkt, können Sie dies über Nur-Text-Transformationen tun, indem Sie:

Konvertieren alle<polyline und<polygon zu<pathÄndere Allespoints=" zud="M

Für alle Elemente, die waren<polygon>müssen Sie hinzufügenz als letztes Zeichen derd Attribut, um den letzten Punkt mit dem ersten zu verbinden. Zum Beispiel:

<polygon points="1,2 3,-4 5,6"/> 

wird

<path d="M1,2 3,-4 5,6z"/> 

Dieser "Hack" funktioniert, weil derspezifikationen deklarieren dass amoveto Befehl (M oderm) gefolgt von mehreren Koordinaten ist zulässig, wobei alle Koordinaten nach dem ersten als interpretiert werdenlineto befehle.

BIG ASS FYI habe ich gefunden. Es hat bei mir aber geklappt: Ersetze alle Instanzen von<polyline mit<path undpoints=" mitd="M. Hier gefunden:gist.github.com/andytlr/9283541 Interactive
Können Sie bitte erklären, wie der Code "ausgeführt" wird? Interactive
Genial !!! Das hilft mir sehr! Fryla- Cristian Marucci
@Interactive legte es in ein<script>  Blockieren Sie am Ende Ihrer SVG-Datei, oder öffnen Sie die Entwicklertools, und fügen Sie sie in die Konsole ein. Phrogz
4

tisch zu sein. Sie können ein XSLT verwenden, um Polygone und Polylinien in Pfade umzuwandeln:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" exclude-result-prefixes="svg"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

  <!-- Identity transform: Copy everything 
       (except for polygon/polyline, handled below) -->
  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

  <!-- Turn polygons/polylines into paths, 
       copy all attributes and content 
       (except for @points: Will be matched
       by template below) -->
  <xsl:template match="svg:polygon|svg:polyline">
    <path>
      <xsl:apply-templates select="@*|node()"/>
    </path>
  </xsl:template>

  <!-- Turn the points attribute into a d attribute -->
  <xsl:template match="@points">
    <xsl:attribute name="d">
      <xsl:value-of select="concat('M',.)"/>
      <!-- If we have a polygon, we need to make 
           this a closed path by appending "z" -->
      <xsl:if test="parent::svg:polygon">
        <xsl:value-of select="'z'"/>
      </xsl:if>
    </xsl:attribute>
  </xsl:template>
</xsl:stylesheet>

Alle Attribute der Polygon- / Polylinienelemente werden auf das Pfadelement übertragen. Dies ist auch für die Stapelverarbeitung geeignet. Sie können dies mit jedem XSLT-Prozessor (Saxon, Xalan, xsltproc, Altova ...) oder sogar im Browser ausführenXSLTProcessor Objekt, wie:

var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(stylesheet);
var transformedSVG = xsltProcessor.transformToFragment(svgDocument).firstChild

(Ähnliche Frage:Beispiele für Polygone, die in SVG nach Pfad oder Polygon gezeichnet wurden)

3


Öffnen Sie das SVG im Inkscape-Vektorgrafiken-EditorAlle Objekte auswählen (Strg-A)Wählen Sie im Dropdown-Menü "Pfad" den ersten Eintrag "Objekt zu Pfad" (Umschalt-Strg-C).Speichern Sie das SVG und überprüfen Sie die Pfadeigenschaften

Könnte keine angemessene Antwort sein (da das Programm bei großen Dateien einige Zeit benötigt).

3

Füll- und Strichattributen

var polys = document.querySelectorAll('polygon,polyline');
[].forEach.call(polys,convertPolyToPath);

function convertPolyToPath(poly){
  var svgNS = poly.ownerSVGElement.namespaceURI;
  var path = document.createElementNS(svgNS,'path');
  var points = poly.getAttribute('points').split(/\s+|,/);
  var x0=points.shift(), y0=points.shift();
  var pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
  if (poly.tagName=='polygon') pathdata+='z';
  path.setAttribute('id',poly.getAttribute('id'));
  path.setAttribute('fill',poly.getAttribute('fill'));
  path.setAttribute('stroke',poly.getAttribute('stroke'));
  path.setAttribute('d',pathdata);

  poly.parentNode.replaceChild(path,poly);
}
Es gibt weitere Attribute, die von Interesse sein könnten, z. B. Klasse, Stil, Transformation, Clip-Pfad, Farbe, Klick, Anzeige, Füllregel, Deckkraft und mehr Thomas W

Verwandte Fragen