JSFiddle - React, Tailwind, and code Playground
by shrpne
HTML
<svg version="1.1" id="_x31_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 132.8 177.3" enable-background="new 0 0 132.8 177.3" xml:space="preserve">
<polygon fill="none" stroke="#CDCDCE" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="22.9256" data-svg-outline="" points="
71.3,110.4 40.8,110.4 50.9,139.5 74.3,139.5 92.7,137.4 112.2,128.2 123.6,115.8 130.4,99.8 132.4,85.4 132.4,68.4 132.4,56.7
130.3,40.2 125.8,28.1 116.3,15.3 106.6,8.1 93.5,2.8 80.1,0.6 74.3,0.4 9,0.4 0.4,8.8 0.4,170.2 9,177 23,177 31.4,168.5
31.1,29.5 71.3,29.5 82.6,31.1 93.8,38.6 98.8,48.8 99.9,56.5 99.9,83 97.6,95 90.6,104.5 78.9,109.7 "></polygon>
<g fill="none" stroke="#CDCDCE" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="22.9256" data-svg-inner="">
<line x1="119.2" y1="93.4" x2="110.1" y2="77.9"></line>
<polyline points="
23,177 16.9,159 31.4,168.5 31.4,153.3 16.9,159 20.4,140.8 5.7,147.4 16.9,159 0.4,157.9 0.4,170.2 16.9,159 9,177 "></polyline>
<polygon points="
31.4,143 20.4,140.8 31.4,153.3 "></polygon>
<polygon points="
13.8,129.3 20.4,140.8 27.4,132.9 31.4,143 31.3,123.5 27.4,132.9 "></polygon>
<polyline points="
0.4,137.5 13.8,129.3 5.7,147.4 0.4,137.5 0.4,157.9 5.7,147.4 20.4,140.8 "></polyline>
<polygon points="
31.3,113.2 13.8,129.3 31.3,123.5 "></polygon>
<polyline points="
13.8,129.3 3.5,116.9 0.4,137.6 0.4,108.6 3.5,116.9 31.3,113.2 "></polyline>
<polyline points="
0.4,108.6 10.4,103.7 3.5,116.9 23.9,103.7 10.4,103.7 0.4,99.6 0.4,88.7 10.4,103.7 15.9,86.1 23.9,103.7 31.3,113.1 31.3,102.2
23.9,103.7 25.9,90.1 31.3,102.2 31.2,81.9 25.9,90.1 15.9,86.1 0.4,88.7 0.4,76.7 15.9,86.1 31.2,81.9 31.2,70.8 15.9,86.1
14.5,67.6 0.4,76.7 "></polyline>
<polygon points="
22.9,59.1 31.2,70.8 14.5,67.6 0.4,70.1 0.4,57.8 14.5,67.6 "></polygon>
<polyline points="
31.2,70.8 31.2,60.2 22.9,59.1 14.3,51.1 14.5,67.6 0.4,46.3 14.3,51.1...CSS
svg {width: 300px;}
code {display: block;}JavaScript
// Для работы скрипта нужно сначала сконвертировать координаты путей в абсолутные
function getPoints($nodes) {
var points = {
push: function(point, linkPoints) {
var pointId = point.x + ',' + point.y;
if (typeof this[pointId] === 'undefined') {
this[pointId] = point;
}
// Если передан аргумент
if (linkPoints) {
if (this[pointId].linkPoints instanceof Array) {
// Если в linkPoints уже хранятся точки, то добавляем новые
this[pointId].linkPoints = this[pointId].linkPoints.concat(linkPoints);
} else {
this[pointId].linkPoints = linkPoints;
}
}
}
};
$nodes.each(function(index, nodeItem) {
var linkPoints, i;
// linkPoints - это pointId точек, с которыми связана текущая точка
// в linkPoints связь указывается только в одном направлении, по пути рисования линии в path, poly, rect, line
switch(nodeItem.nodeName.toUpperCase()) {
case 'PATH':
// Только абсолютные координаты в путях
var segs = nodeItem.pathSegList;
for(i = 0; i < segs.numberOfItems; i++) {
var seg = segs.getItem(i);
if (seg.pathSegTypeAsLetter === 'z' || seg.pathSegTypeAsLetter === 'Z') {continue;}
var point = {x: Math.round(seg.x*10)/10, y: Math.round(seg.y*10)/10};
linkPoints = false;
if (i < segs.numberOfItems - 1) {
// Если не последнйй сегмент
var nextSeg = segs.getItem(i+1);
if (nextSeg.pathSegTypeAsLetter === 'z' || nextSeg.pathSegTypeAsLetter === 'Z') {
// Если следущий сегммент — закрывающий
nextSeg = segs.getItem(0);
}
...