Pregunta sobre raphael, svg – Convertir el polígono SVG a la ruta

22

Tengo un archivo SVG bastante grande de subdivisiones administrativas con las que necesito trabajar en Raphael.JS (tiene 600 polígonos y pesa 1.2 Mb).

Ahora, necesito convertir estos polígonos en rutas para que funcionen en Rafael. El granherramienta poly2path hace eso, pero no admite ningún comando por lotes, por lo que la posición de cada polígono en relación con los demás se pierde.

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

Muchas gracias

Si vuelve a visitar @nkb, acepte su respuesta preferida. halfer

Tu respuesta

4   la respuesta
4

Copiar todo desde las herramientas de desarrollo 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>

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

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

(Pregunta similar:Ejemplos de polígonos dibujados por camino frente a polígono en SVG)

3

Pequeña corrección para los atributos de identificación, relleno y trazo de polígono

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);
}
Hay más atributos que pueden ser de interés, como clase, estilo, transformación, ruta de recorte, color, clic, visualización, regla de relleno, opacidad y más Thomas W
72
Abra su SVG en un navegador web.

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

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.

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) utiliza técnicas basadas en cadenas para obtener y establecer los puntos; el otro utiliza el DOM SVG para acceder a puntos y configurar comandos de ruta.

Como lo señaló @Interactive en los comentarios, puede hacerlo mediante transformaciones de solo texto mediante:

Convertir todo<polyline y<polygon a<pathCambia todopoints=" ad="M

Por cualquier elemento que haya<polygon>, necesitas agregarz como el último personaje de lad atributo para conectar el último punto al primero. Por ejemplo:

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

se convierte en

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

Este 'hack' funciona porque elespecificaciones declarar que unamoveto comandoM om) seguido de múltiples coordenadas es legal, con todas las coordenadas después de la primera interpretadas comolineto comandos

¿Puede por favor explicar cómo "ejecutar" el código? Interactive
BIG ASS FYI he encontrado. Funcionó para mí pero: Reemplaza todas las instancias de<polyline con<path ypoints=" cond="M. Encontrado aquígist.github.com/andytlr/9283541 Interactive
@Interactive Este es un gran truco, y es válido. Las especificaciones para elmoveto el comando establece explícitamente que las coordenadas adicionales más allá del primer par se tratan como implícitaslineto comandos Voy a editar mi respuesta para añadir. Phrogz
@Interactive lo puso en una<script>  bloque en la parte inferior de su archivo SVG, o abra las herramientas del desarrollador y péguelo en la consola. Phrogz
3

Una respuesta clicky-bunty:

abrir el svg en el editor de gráficos vectoriales inkscapeseleccionar todos los objetos (ctrl-a)en el menú desplegable punto "ruta" seleccione la primera entrada "objeto a ruta" (shift-ctrl-c)guardar el svg y echa un vistazo a las propiedades de la ruta

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

Preguntas relacionadas