etiqueta - svg tag g

Convierta el polígono SVG en ruta

Question

Tengo un archivo SVG bastante grande de subdivisiones administrativas con el que tengo que trabajar en Raphael.JS (tiene 600 polígonos y un peso de 1,2 Mb).

Ahora, necesito convertir estos polígonos en caminos para que funcione en Raphael. La gran herramienta poly2path lo hace, pero no admite ningún comando por lotes, por lo que se pierde la posición de cada polígono con respecto a los demás.

¿Conoces alguna herramienta para convertir los polígonos SVG en rutas? (También tengo el archivo AI que se utilizó para exportar el SVG).

Muchas gracias

Answer 1

Una pequeña solución para los atributos de id. De polígono, relleno y trazo.

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);
}

Answer 2

Una respuesta clicky-bunty:

1. abra el svg en el editor de gráficos vectoriales de Inkscape
2. seleccionar todos los objetos (ctrl-a)
3. en el menú desplegable "ruta" del menú, seleccione la primera entrada "objeto a ruta" (shift-ctrl-c)
4. guarde el svg y revise las propiedades de ruta

Puede que no sea una respuesta adecuada (porque con archivos grandes el programa necesita algo de tiempo).

Answer 3

1. Abra su SVG en un navegador web.

2. Ejecute este código:

   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);
   }

3. Usando las herramientas de desarrollo (o Firebug) del navegador, use "Copiar como HTML" (o copiar SVG) en el elemento para obtener la fuente modificada en el portapapeles.

4. Pega en un nuevo archivo y disfruta.

Tengo una demostración del método anterior (ligeramente modificado) en mi sitio web:
http://phrogz.net/svg/convert_polys_to_paths.svg

Hay dos métodos en uso en esa página; uno (como el anterior) usa técnicas basadas en cuerdas para obtener y establecer los puntos; el otro usa el SVG DOM para acceder a los puntos y establecer los comandos de ruta.

Tal como lo señaló @Interactive en los comentarios, puede hacerlo a través de transformaciones de solo texto:

1. Convierta todos los <polyline y <polygon a <path
2. Cambiar todos los points=" a d="M

3. Para cualquier elemento que fuera <polygon> , debe agregar z como el último carácter del atributo d para conectar el último punto con el primero. Por ejemplo:

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

   se convierte

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

Este ''truco'' funciona porque las especificaciones declaran que un comando moveto ( M o m ) seguido de múltiples coordenadas es legal, con todas las coordenadas después de la primera interpretada como comandos de lineto comando.

Answer 4

Copiar todo desde las herramientas de desarrollador parece bastante inconveniente. Podría usar un XSLT para transformar polígonos y polilíneas en rutas:

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

Cualquier atributo de los elementos de polígono / polilínea se transferirá al elemento de ruta. Esto también es adecuado para el procesamiento por lotes. Puede ejecutar esto usando cualquier procesador XSLT (Saxon, Xalan, xsltproc, Altova ...) o incluso en el navegador, usando el objeto XSLTProcessor , como:

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

(Pregunta similar: ejemplos de polígonos dibujados por ruta vs polígono en SVG )