danwizard208
/
wiki-map
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: danwizard208:d99d7446ca9a2471cd561fd028de6c83c79079d6
Branches Tags
danwizard208:main
..
compare: danwizard208:bc9e7d5477195db9d7124087544f604eb0431918
Branches Tags
danwizard208:main

2 Commits
d99d7446ca ... bc9e7d5477

Author SHA1 Message Date
Daniel Asher Resnick bc9e7d5477 Render a Path as a single SVG <path> element
11 months ago
Daniel Asher Resnick f44777e585 Remove and ignore output of tests
11 months ago
4 changed files with 15 additions and 354 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats
  1. 30
      HexGrid/Path.pm
  2. 1
      tests/.gitignore
  3. 9
      tests/paths.pl
  4. 329
      tests/paths.svg

30
HexGrid/Path.pm
Unescape View File

@ -35,9 +35,9 @@ sub get_edge_direction($tile1, $tile2)
#TODO: should die here, to be caught/bubbled in render... #TODO: should die here, to be caught/bubbled in render...
} }
sub curve_path($x1, $y1, $qx, $qy, $x2, $y2) sub curve_to($qx, $qy, $x, $y)
{ {
return "M $x1,$y1 Q $qx,$qy $x2,$y2"; return "Q $qx,$qy $x,$y";
} }
@ -48,7 +48,7 @@ sub render($this, $grid, $svg)
return unless @{$this->tiles}; return unless @{$this->tiles};
my $g = $svg->g(id => $this->id, class => $this->css_class); my $g = $svg->g(id => $this->id, class => $this->css_class);
my ($x1, $x2, $y1, $y2); my ($x0, $x, $y0, $y);
my $current_tile = shift @{$this->tiles}; my $current_tile = shift @{$this->tiles};
unless (@{$this->tiles}) unless (@{$this->tiles})
@ -59,13 +59,13 @@ sub render($this, $grid, $svg)
fill => $this->colour, style => $this->style, class => $this->css_class); fill => $this->colour, style => $this->style, class => $this->css_class);
return; return;
} }
my $path_spec;
my $previous_tile = $current_tile; my $previous_tile = $current_tile;
$current_tile = shift @{$this->tiles}; $current_tile = shift @{$this->tiles};
my $next_edge = get_edge_direction($previous_tile, $current_tile); my $next_edge = get_edge_direction($previous_tile, $current_tile);
($x1, $y1) = $grid->coords_of_centre($previous_tile->nw, $previous_tile->sw); ($x0, $y0) = $grid->coords_of_centre($previous_tile->nw, $previous_tile->sw);
($x2, $y2) = $grid->coords_of_edge($previous_tile->nw, $previous_tile->sw, $next_edge); ($x, $y) = $grid->coords_of_edge($previous_tile->nw, $previous_tile->sw, $next_edge);
$g->line(x1 => $x1, y1 => $y1, x2 => $x2, y2 => $y2, $path_spec .= "M $x0,$y0 L $x,$y";
stroke => $this->colour, style => $this->style, class => $this->css_class);
my $previous_edge; # not defined yet my $previous_edge; # not defined yet
my $next_tile; # not defined yet my $next_tile; # not defined yet
@ -75,23 +75,21 @@ sub render($this, $grid, $svg)
$previous_edge = -$next_edge; $previous_edge = -$next_edge;
$next_edge = get_edge_direction($current_tile, $next_tile); $next_edge = get_edge_direction($current_tile, $next_tile);
($x1,$y1) = $grid->coords_of_edge($current_tile->nw, $current_tile->sw, $previous_edge);
my ($qx,$qy) = $grid->coords_of_centre($current_tile->nw, $current_tile->sw); my ($qx,$qy) = $grid->coords_of_centre($current_tile->nw, $current_tile->sw);
($x2,$y2) = $grid->coords_of_edge($current_tile->nw, $current_tile->sw, $next_edge); ($x,$y) = $grid->coords_of_edge($current_tile->nw, $current_tile->sw, $next_edge);
$g->path(d => curve_path($x1,$y1, $qx,$qy, $x2,$y2), fill => 'transparent', $path_spec .= " " . curve_to($qx,$qy, $x,$y);
stroke => $this->colour, style => $this->style, class => $this->css_class
);
$previous_tile = $current_tile; $previous_tile = $current_tile;
$current_tile = $next_tile; $current_tile = $next_tile;
} }
# When loop is done (or if it was empty) $current_tile is the last tile # When loop is done (or if it was empty) $current_tile is the last tile
# $next_edge will be the last used edge, so use it's opposite for the source of last line # $next_edge will be the last used edge, so use it's opposite for the source of last line
($x1, $y1) = $grid->coords_of_edge($current_tile->nw, $current_tile->sw, -$next_edge); ($x, $y) = $grid->coords_of_centre($current_tile->nw, $current_tile->sw);
($x2, $y2) = $grid->coords_of_centre($current_tile->nw, $current_tile->sw); $path_spec .= " L $x,$y";
$g->line(x1 => $x1, y1 => $y1, x2 => $x2, y2 => $y2, $g->path(d => $path_spec, fill => 'transparent',
stroke => $this->colour, style => $this->style, class => $this->css_class); stroke => $this->colour, style => $this->style, class => $this->css_class
);
} }
1; 1;

1
tests/.gitignore vendored
Unescape View File

@ -0,0 +1 @@
*.svg

9
tests/paths.pl
Unescape View File

@ -35,14 +35,5 @@ $grid->make_path_from('loop-id',
colour => 'red', css_class => 'path', style => { 'stroke-width' => 5 } colour => 'red', css_class => 'path', style => { 'stroke-width' => 5 }
); );
# say "@{[$grid->coords_of_centre(-2,0)]}";
# say "@{[$grid->coords_of_edge(-2,0,$HexGrid::DIR{nw})]}";
# say "@{[$grid->coords_of_edge(-2,0,$HexGrid::DIR{sw})]}";
# say "@{[$grid->coords_of_edge(-2,0,$HexGrid::DIR{s})]}" ;
# say "@{[$grid->coords_of_edge(-2,0,$HexGrid::DIR{se})]}";
# say "@{[$grid->coords_of_edge(-2,0,$HexGrid::DIR{ne})]}";
# say "@{[$grid->coords_of_edge(-2,0,$HexGrid::DIR{n})]}" ;
# say Dumper($grid);
say $grid->render; say $grid->render;

329
tests/paths.svg
Unescape View File

@ -1,329 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg height="1000" id="grid-root" preserveAspectRatio="xMidYMid" version="1.2" viewBox="-900 -519.615242270663 2000 1212.43556529821" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>.pin-popup { visibility: hidden; }</style>
<defs />
<g id="">
<g class="" id="1_-2_tile" transform="translate(150, -259.807621135332)">
<polygon id="1_-2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="1_-2_clip">
<use href="#1_-2_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-450, 86.6025403784439)">
<polygon id="1_2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="1_2_clip">
<use href="#1_2_inner_hex" />
</clipPath>
</g>
<g class="" id="1_-3_tile" transform="translate(300, -346.410161513775)">
<polygon id="1_-3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="1_-3_clip">
<use href="#1_-3_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-300, 0)">
<polygon id="1_1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="1_1_clip">
<use href="#1_1_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-150, -86.6025403784439)">
<polygon id="1_0_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="1_0_clip">
<use href="#1_0_inner_hex" />
</clipPath>
</g>
<g class="" id="1_-1_tile" transform="translate(0, -173.205080756888)">
<polygon id="1_-1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="1_-1_clip">
<use href="#1_-1_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-600, 173.205080756888)">
<polygon id="1_3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="1_3_clip">
<use href="#1_3_inner_hex" />
</clipPath>
</g>
<g class="" id="0_-1_tile" transform="translate(150, -86.6025403784439)">
<polygon id="0_-1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="0_-1_clip">
<use href="#0_-1_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-450, 259.807621135332)">
<polygon id="0_3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="0_3_clip">
<use href="#0_3_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-150, 86.6025403784439)">
<polygon id="0_1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="0_1_clip">
<use href="#0_1_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(0, 0)">
<polygon id="0_0_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="0_0_clip">
<use href="#0_0_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-300, 173.205080756888)">
<polygon id="0_2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="0_2_clip">
<use href="#0_2_inner_hex" />
</clipPath>
</g>
<g class="" id="0_-3_tile" transform="translate(450, -259.807621135332)">
<polygon id="0_-3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="0_-3_clip">
<use href="#0_-3_inner_hex" />
</clipPath>
</g>
<g class="" id="0_-2_tile" transform="translate(300, -173.205080756888)">
<polygon id="0_-2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="0_-2_clip">
<use href="#0_-2_inner_hex" />
</clipPath>
</g>
<g class="" id="-1_0_tile" transform="translate(150, 86.6025403784439)">
<polygon id="-1_0_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-1_0_clip">
<use href="#-1_0_inner_hex" />
</clipPath>
</g>
<g class="" id="-1_1_tile" transform="translate(0, 173.205080756888)">
<polygon id="-1_1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-1_1_clip">
<use href="#-1_1_inner_hex" />
</clipPath>
</g>
<g class="" id="-1_-1_tile" transform="translate(300, 0)">
<polygon id="-1_-1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-1_-1_clip">
<use href="#-1_-1_inner_hex" />
</clipPath>
</g>
<g class="" id="-1_3_tile" transform="translate(-300, 346.410161513775)">
<polygon id="-1_3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-1_3_clip">
<use href="#-1_3_inner_hex" />
</clipPath>
</g>
<g class="" id="-1_-2_tile" transform="translate(450, -86.6025403784439)">
<polygon id="-1_-2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-1_-2_clip">
<use href="#-1_-2_inner_hex" />
</clipPath>
</g>
<g class="" id="-1_2_tile" transform="translate(-150, 259.807621135332)">
<polygon id="-1_2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-1_2_clip">
<use href="#-1_2_inner_hex" />
</clipPath>
</g>
<g class="" id="-1_-3_tile" transform="translate(600, -173.205080756888)">
<polygon id="-1_-3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-1_-3_clip">
<use href="#-1_-3_inner_hex" />
</clipPath>
</g>
<g class="" id="3_-2_tile" transform="translate(-150, -433.012701892219)">
<polygon id="3_-2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="3_-2_clip">
<use href="#3_-2_inner_hex" />
</clipPath>
</g>
<g class="" id="3_-3_tile" transform="translate(0, -519.615242270663)">
<polygon id="3_-3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="3_-3_clip">
<use href="#3_-3_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-750, -86.6025403784439)">
<polygon id="3_2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="3_2_clip">
<use href="#3_2_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-450, -259.807621135332)">
<polygon id="3_0_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="3_0_clip">
<use href="#3_0_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-600, -173.205080756888)">
<polygon id="3_1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="3_1_clip">
<use href="#3_1_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-900, 0)">
<polygon id="3_3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="3_3_clip">
<use href="#3_3_inner_hex" />
</clipPath>
</g>
<g class="" id="3_-1_tile" transform="translate(-300, -346.410161513775)">
<polygon id="3_-1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="3_-1_clip">
<use href="#3_-1_inner_hex" />
</clipPath>
</g>
<g class="" id="-2_-2_tile" transform="translate(600, 0)">
<polygon id="-2_-2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-2_-2_clip">
<use href="#-2_-2_inner_hex" />
</clipPath>
</g>
<g class="" id="-2_2_tile" transform="translate(0, 346.410161513775)">
<polygon id="-2_2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-2_2_clip">
<use href="#-2_2_inner_hex" />
</clipPath>
</g>
<g class="" id="-2_-3_tile" transform="translate(750, -86.6025403784439)">
<polygon id="-2_-3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-2_-3_clip">
<use href="#-2_-3_inner_hex" />
</clipPath>
</g>
<g class="" id="-2_1_tile" transform="translate(150, 259.807621135332)">
<polygon id="-2_1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-2_1_clip">
<use href="#-2_1_inner_hex" />
</clipPath>
</g>
<g class="" id="-2_0_tile" transform="translate(300, 173.205080756888)">
<polygon id="-2_0_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-2_0_clip">
<use href="#-2_0_inner_hex" />
</clipPath>
</g>
<g class="" id="-2_-1_tile" transform="translate(450, 86.6025403784439)">
<polygon id="-2_-1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-2_-1_clip">
<use href="#-2_-1_inner_hex" />
</clipPath>
</g>
<g class="" id="-2_3_tile" transform="translate(-150, 433.012701892219)">
<polygon id="-2_3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-2_3_clip">
<use href="#-2_3_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-300, -173.205080756888)">
<polygon id="2_0_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="2_0_clip">
<use href="#2_0_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-450, -86.6025403784439)">
<polygon id="2_1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="2_1_clip">
<use href="#2_1_inner_hex" />
</clipPath>
</g>
<g class="" id="2_-1_tile" transform="translate(-150, -259.807621135332)">
<polygon id="2_-1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="2_-1_clip">
<use href="#2_-1_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-750, 86.6025403784439)">
<polygon id="2_3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="2_3_clip">
<use href="#2_3_inner_hex" />
</clipPath>
</g>
<g class="" id="2_-2_tile" transform="translate(0, -346.410161513775)">
<polygon id="2_-2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="2_-2_clip">
<use href="#2_-2_inner_hex" />
</clipPath>
</g>
<g class="" id="" transform="translate(-600, 0)">
<polygon id="2_2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="2_2_clip">
<use href="#2_2_inner_hex" />
</clipPath>
</g>
<g class="" id="2_-3_tile" transform="translate(150, -433.012701892219)">
<polygon id="2_-3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="2_-3_clip">
<use href="#2_-3_inner_hex" />
</clipPath>
</g>
<g class="" id="-3_0_tile" transform="translate(450, 259.807621135332)">
<polygon id="-3_0_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-3_0_clip">
<use href="#-3_0_inner_hex" />
</clipPath>
</g>
<g class="" id="-3_1_tile" transform="translate(300, 346.410161513775)">
<polygon id="-3_1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-3_1_clip">
<use href="#-3_1_inner_hex" />
</clipPath>
</g>
<g class="" id="-3_3_tile" transform="translate(0, 519.615242270663)">
<polygon id="-3_3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-3_3_clip">
<use href="#-3_3_inner_hex" />
</clipPath>
</g>
<g class="" id="-3_-1_tile" transform="translate(600, 173.205080756888)">
<polygon id="-3_-1_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-3_-1_clip">
<use href="#-3_-1_inner_hex" />
</clipPath>
</g>
<g class="" id="-3_-2_tile" transform="translate(750, 86.6025403784439)">
<polygon id="-3_-2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-3_-2_clip">
<use href="#-3_-2_inner_hex" />
</clipPath>
</g>
<g class="" id="-3_-3_tile" transform="translate(900, 0)">
<polygon id="-3_-3_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-3_-3_clip">
<use href="#-3_-3_inner_hex" />
</clipPath>
</g>
<g class="" id="-3_2_tile" transform="translate(150, 433.012701892219)">
<polygon id="-3_2_inner_hex" points="0,86.6025403784439 50,0 150,0 200,86.6025403784439 150,173.205080756888 50,173.205080756888" style="stroke: white; stroke-width: 1" />
<clipPath id="-3_2_clip">
<use href="#-3_2_inner_hex" />
</clipPath>
</g>
</g>
<g class="path" id="test-id">
<line class="path" stroke="lime" style="stroke-width: 5" x1="100" x2="25" y1="86.6025403784439" y2="43.3012701892219" />
<path class="path" d="M 25,43.3012701892219 Q -50,0 -125,43.3012701892219" stroke="lime" style="stroke-width: 5" />
<path class="path" d="M -125,43.3012701892219 Q -200,86.6025403784439 -200,0" stroke="lime" style="stroke-width: 5" />
<path class="path" d="M -200,0 Q -200,-86.6025403784439 -125,-129.903810567666" stroke="lime" style="stroke-width: 5" />
<path class="path" d="M -125,-129.903810567666 Q -50,-173.205080756888 25,-216.50635094611" stroke="lime" style="stroke-width: 5" />
<path class="path" d="M 25,-216.50635094611 Q 100,-259.807621135332 175,-216.50635094611" stroke="lime" style="stroke-width: 5" />
<path class="path" d="M 175,-216.50635094611 Q 250,-173.205080756888 175,-129.903810567666" stroke="lime" style="stroke-width: 5" />
<path class="path" d="M 175,-129.903810567666 Q 100,-86.6025403784439 25,-129.903810567666" stroke="lime" style="stroke-width: 5" />
<path class="path" d="M 25,-129.903810567666 Q -50,-173.205080756888 -125,-216.50635094611" stroke="lime" style="stroke-width: 5" />
<line class="path" stroke="lime" style="stroke-width: 5" x1="-125" x2="-200" y1="-216.50635094611" y2="-259.807621135332" />
</g>
<g class="path" id="point-id">
<circle class="path" cx="100" cy="259.807621135332" fill="cyan" r="5" style="stroke-width: 5" />
</g>
<g class="path" id="loop-id">
<line class="path" stroke="red" style="stroke-width: 5" x1="400" x2="325" y1="259.807621135332" y2="216.50635094611" />
<path class="path" d="M 325,216.50635094611 Q 250,173.205080756888 325,129.903810567666" stroke="red" style="stroke-width: 5" />
<path class="path" d="M 325,129.903810567666 Q 400,86.6025403784439 475,129.903810567666" stroke="red" style="stroke-width: 5" />
<path class="path" d="M 475,129.903810567666 Q 550,173.205080756888 475,216.50635094611" stroke="red" style="stroke-width: 5" />
<line class="path" stroke="red" style="stroke-width: 5" x1="475" x2="400" y1="216.50635094611" y2="259.807621135332" />
</g>
<!--
Generated using the Perl SVG Module V2.87
by Ronan Oger
-->
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

Write Preview
Loading…
Cancel
Save