Вопрос по svg – Конвертировать SVG полигон в путь

22

У меня довольно большой SVG-файл административных подразделений, с которым мне нужно работать в Raphael.JS (он содержит 600 полигонов и весит 1,2 Мб).

Теперь мне нужно преобразовать эти многоугольники в пути, чтобы они работали в Рафаэле. Великий poly2path tool делает это, но не поддерживает никакие пакетные команды, поэтому позиция каждого многоугольника относительно других теряется.

Знаете ли вы какой-либо инструмент для преобразования SVG-полигонов в контуры? (У меня также есть файл AI, который использовался для экспорта SVG).

Большое спасиб

Если вы снова посетите @nkb, примите предпочтительный ответ. halfer

Ваш Ответ

4   ответа
72
Откройте свой SVG в веб-браузере.

Запустите этот код:

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

Используя Инструменты разработчика (или Firebug) браузера, используйте «Копировать как HTML» (или Копировать SVG) на элементе, чтобы получить измененный источник в буфер обмена.

Вставьте в новый файл и наслаждайтесь.

У меня есть демо-версия описанного выше метода (слегка измененная) на моем сайте:
http: //phrogz.net/svg/convert_polys_to_paths.sv

На этой странице используются два метода; один (как и выше) использует строковые методы для получения и установки очков; другая использует SVG DOM для доступа к точкам и установки команд пути.

Как отмечено @Interactive в комментариях, вы можете сделать это с помощью текстовых преобразований:

Конвертировать все<polyline а также<polygon в<path Измени всеpoints=" вd="M

Для любых элементов, которые были<polygon>, тебе нужно добавитьz как последний символdтрибут @ для подключения последней точки к первой. Например

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

Становится

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

Это «хак» работает, потому ч спецификации объявляют этоmoveto команда M илиm), за которым следуют несколько координат, допустимо, все координаты после первой интерпретируются какlineto команды.

великолепно .. спасибо user1236048
Это отлично работает с Raphael во всех браузерах (даже IE7-8), но не в IE9. Рафаэль просто не рисует пути на основе этой функции. У тебя есть идеи почему? Roman
@ oyatek Задайте этот вопрос как вопрос с тегом SVG и репро кейсом. Phrogz
Считаете ли вы, почему это не работает в IE9? Timo Kähkönen
@ Interactive Это отличный хак, и он действителен. Спецификации дляmovetoоманда @ явно заявляет, что дополнительные координаты за пределами первой пары рассматриваются как неявныеlineto команды. Я отредактирую свой ответ, чтобы добавить. Phrogz
4

ным. Вы можете использовать XSLT для преобразования полигонов и полилиний в пути:

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

Любые атрибуты элементов многоугольника / полилинии будут перенесены на элемент пути. Это также подходит для пакетной обработки. Вы можете запустить это, используя любой XSLT-процессор (Saxon, Xalan, xsltproc, Altova ...) или даже в браузере, используяXSLTProcessor объект, как:

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

(Аналогичный вопрос: Примеры многоугольников, нарисованных по пути против многоугольника в SVG)

3

атрибутов заливки и обводк

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);
}
Есть еще несколько атрибутов, которые могут представлять интерес, такие как класс, стиль, преобразование, путь клипа, цвет, щелчок, отображение, правило заполнения, прозрачность и другие Thomas W
3


Откройте SVG в редакторе векторной графики Inkscape выбрать все объекты (ctrl-a) в раскрывающемся меню пункт «путь» выберите первую запись «объект к пути» (shift-ctrl-c) сохранить SVG и проверить свойства пути

Может быть неправильный ответ (потому что для больших файлов программе нужно некоторое время).

Похожие вопросы