Pergunta sobre svg, raphael – Converter polígono SVG para caminho

22

Eu tenho um arquivo SVG razoavelmente grande de subdivisões administrativas com as quais eu preciso trabalhar em Raphael.JS (tem 600 polígonos e pesos 1.2 Mb).

Agora, preciso converter esses polígonos em caminhos para que ele funcione no Raphael. O grandeferramenta poly2path faz isso, mas não suporta nenhum comando batch, de modo que a posição de cada polígono em relação aos outros é perdida.

Você conhece alguma ferramenta para converter polígonos SVG em caminhos? (Eu também tenho o arquivo AI que foi usado para exportar o SVG).

Muito Obrigado

Se você visitar novamente @nkb, por favor aceite sua resposta preferida. halfer

Sua resposta

4   a resposta
4

ente. Você poderia usar um XSLT para transformar polígonos e polilinhas em caminhos:

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

Quaisquer atributos dos elementos polígonos / polilinhas serão transportados para o elemento de caminho. Isso também é adequado para processamento em lote. Você pode executar isso usando qualquer processador XSLT (Saxon, Xalan, xsltproc, Altova ...) ou até mesmo no navegador, usando oXSLTProcessor objeto, como:

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

(Pergunta semelhante:Exemplos de polígonos desenhados por caminho vs polígono em SVG)

3


abra o editor de gráficos vectoriais svg in inkscapeselecione todos os objetos (ctrl-a)no menu suspenso, aponte "caminho", selecione a primeira entrada "objeto para caminho" (shift-ctrl-c)salve o svg e confira as propriedades do caminho

Pode não ser uma resposta apropriada (porque com arquivos grandes o programa precisa de algum tempo).

72
Abra seu SVG em um navegador da web.

Execute 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 as Ferramentas de Desenvolvedor (ou Firebug) do navegador, use "Copiar como HTML" (ou Copiar SVG) no elemento para obter a fonte modificada na área de transferência.

Cole em um novo arquivo e aproveite.

Eu tenho uma demonstração do método acima (ligeiramente modificado) no meu site:
http://phrogz.net/svg/convert_polys_to_paths.svg

Existem dois métodos em uso nessa página; um (como o acima) usa técnicas baseadas em strings para obter e definir os pontos; o outro usa o SVG DOM para acessar pontos e configurar comandos de caminho.

Conforme observado por @Interactive nos comentários, você pode fazer isso por meio de transformações somente de texto:

Converter tudo<polyline e<polygon para<pathMude tudopoints=" parad="M

Para quaisquer elementos que foram<polygon>, você precisa adicionarz como o último personagem dod atributo para conectar o último ponto ao primeiro. Por exemplo:

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

torna-se

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

Este 'hack' funciona porque oespecificações declarar que ummoveto comando (M oum) seguido de múltiplas coordenadas é legal, com todas as coordenadas após a primeira interpretada comolineto comandos.

Você pode por favor explicar como "executar" o código? Interactive
GENIOSO !!! Isso realmente me ajuda muito! Fryla- Cristian Marucci
BIG ASS FYI eu encontrei. Funcionou para mim, mas: Substitua todas as ocorrências de<polyline com<path epoints=" comd="M. Encontrado aqui:gist.github.com/andytlr/9283541 Interactive
@Interactive colocá-lo em um<script>  bloco na parte inferior do seu arquivo SVG, ou abra as ferramentas do desenvolvedor e cole-o no console. Phrogz
3

preenchimento e traço salvar

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);
}
Há mais atributos que podem ser de interesse, como classe, estilo, transformação, caminho do clipe, cor, onclick, exibição, regra de preenchimento, opacidade e muito mais Thomas W

Perguntas relacionadas