I have a SVG generated hex grid. The hex grid is composed of polygons which are fed their points via PhP Array. The <polygon> is followed by a <use> element which points to a <symbol>.
This code renders the hex grid correctly and the fill attribute works. However, when the use element renders the symbol it always puts it in the same location on the viewport.
The grid renders across the viewport in multiple locations, how do I keep the symbol relative to the polygon as its points change?
Sample Array code for points
$points = array("247.8,37.9 223.8,37.9 211.7,58.9 223.8,79.9 247.8,79.9 259.8,58.9",
,"247.8,79.9 223.8,79.9 211.7,100.9 223.8,121.9 247.8,121.9 259.8,100.9"
,"211.7,100.9 187.7,100.9 175.7,121.9 187.7,143 211.7,143 223.8,121.9"
,"211.7,143 187.7,143 175.7,164 187.7,185 211.7,185 223.8,164"
,"211.7,185 187.7,185 175.7,206 187.7,227 211.7,227 223.8,206"
,"211.7,227 187.7,227 175.7,248 187.7,269 211.7,269 223.8,248"
,"211.7,269 187.7,269 175.7,290 187.7,311.1 211.7,311.1 223.8,290"
,"211.7,311.1 187.7,311.1 175.7,332.1 187.7,353.1 211.7,353.1 223.8,332.1"
echo '<svg version="1.1" viewBox="0 0 2410 1192" x="0" y="0" preserveAspectRatio="none" width="100%">';
$hex = 0000;
//Symbol
echo '<symbol>
<path id="hills" style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.03431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 234.27969,88.879347 c -2.45345,0.0538 -5.06817,2.298827 -7.87745,7.163223 l 15.63905,0.523621 c -2.40829,-4.9797 -4.981,-7.744138
-7.7616,-7.686754 z m 7.59808,8.001824 c -2.19129,0.03587 -4.68463,1.308966 -7.33231,4.522159 -3.83449,-1.16121 -7.72778,1.0103
-11.72419,9.24363 l 22.08548,0.14794 c -2.78806,-3.67548 -5.58581,-6.87639 -8.40893,-8.51612 l 13.63896,3.34992 c -0.79213,-4.08344
-3.93464,-8.819257 -8.25901,-8.747797 z" /></symbol>';
foreach ($points as $p) {
echo '<polygon class="st6" points="'.$p.' " ';
getFill($hydro,$landfill,$hex);
echo 'id="'.$hex.'" stroke="#000000" stroke-width="1"/>';
echo '<use xlink:href="#hills"/>';
$hex++;
}
echo '</svg>';
Sample Output (note the hills only rendered in one hex).
[Sample Hex Map] https://www.noxgeo.com/starfinder/galaxy/data/map-sample.png
Sample SVG Output:
<svg version="1.1" viewBox="0 0 2410 1192" x="0" y="0" preserveAspectRatio="none" width="100%">
<symbol>
<path id="hills" style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.03431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 234.27969,88.879347 c -2.45345,0.0538 -5.06817,2.298827 -7.87745,7.163223 l 15.63905,0.523621 c -2.40829,-4.9797 -4.981,-7.744138
-7.7616,-7.686754 z m 7.59808,8.001824 c -2.19129,0.03587 -4.68463,1.308966 -7.33231,4.522159 -3.83449,-1.16121 -7.72778,1.0103
-11.72419,9.24363 l 22.08548,0.14794 c -2.78806,-3.67548 -5.58581,-6.87639 -8.40893,-8.51612 l 13.63896,3.34992 c -0.79213,-4.08344
-3.93464,-8.819257 -8.25901,-8.747797 z"></path>
</symbol>
<polygon class="st6" points="247.8,37.9 223.8,37.9 211.7,58.9 223.8,79.9 247.8,79.9 259.8,58.9 " fill="#fdf898" id="0" stroke="#000000" stroke-width="1"></polygon><use xlink:href="#hills"></use><polygon class="st6" points="247.8,79.9 223.8,79.9 211.7,100.9 223.8,121.9 247.8,121.9 259.8,100.9 " fill="#66D3FA" id="1" stroke="#000000" stroke-width="1"></polygon>
<use xlink:href="#hills"></use>
<polygon class="st6" points="211.7,100.9 187.7,100.9 175.7,121.9 187.7,143 211.7,143 223.8,121.9 " fill="#fdf898" id="2" stroke="#000000" stroke-width="1"></polygon>
<use xlink:href="#hills"></use>
<polygon class="st6" points="211.7,143 187.7,143 175.7,164 187.7,185 211.7,185 223.8,164 " fill="#66D3FA" id="3" stroke="#000000" stroke-width="1"></polygon>
<use xlink:href="#hills"></use>
<polygon class="st6" points="211.7,185 187.7,185 175.7,206 187.7,227 211.7,227 223.8,206 " fill="#66D3FA" id="4" stroke="#000000" stroke-width="1"></polygon>
<use xlink:href="#hills"></use>
</svg>4
Unfortunately we can’t align or distribute SVG elements in relation to each other as we can do with nested HTML elements (e.g via flex, grid or relative positions).
As explained by chrwahl you should first reposition your assets to facilitate the x/y translation.
In the following example I’ve centered the hexagon and the icon in a 48.1×42 viewBox:
svg {
overflow: visible;
outline: 1px solid #000;
}<svg viewBox="0 0 48.1 42" fill="none" stroke="#000">
<polygon points="0 21 12 0 36 0 48.1 21 36.1 42 12.1 42 0 21" />
<path d="m 10 28 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</svg>You can retrieve the offsets from your polygon array by splitting each points attribute in an array of x and y coordinates.
We can get the top-Y coordinates from the first vertice and the left-X from the 3. one.
// get x/y offsets for polygons
$pointsStr = str_replace(',', ' ', $pts);
$pts = explode(' ', $pointsStr);
// left x
$x= floatval($pts[4]);
// top y
$y= floatval($pts[1]);
Due to the previous normalisation we can apply these values as translate offsets
<?php
$polygons = [
"247.8,37.9 223.8,37.9 211.7,58.9 223.8,79.9 247.8,79.9 259.8,58.9",
"247.8,79.9 223.8,79.9 211.7,100.9 223.8,121.9 247.8,121.9 259.8,100.9",
"211.7,100.9 187.7,100.9 175.7,121.9 187.7,143 211.7,143 223.8,121.9",
"211.7,143 187.7,143 175.7,164 187.7,185 211.7,185 223.8,164",
"211.7,185 187.7,185 175.7,206 187.7,227 211.7,227 223.8,206",
"211.7,227 187.7,227 175.7,248 187.7,269 211.7,269 223.8,248",
"211.7,269 187.7,269 175.7,290 187.7,311.1 211.7,311.1 223.8,290",
"211.7,311.1 187.7,311.1 175.7,332.1 187.7,353.1 211.7,353.1 223.8,332.1"
];
$svg =
'<svg viewBox="0 0 500 500" fill="none" >
<defs>
<!-- hexagon -->
<polygon id="hexagon" points="0 21 12 0 36 0 48.1 21 36.1 42 12.1 42 0 21" />
<!-- icon -->
<path id="hills" d="m 10 28 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</defs>
';
$polyWidth=48.1;
$polyHeight=42;
foreach ($polygons as $i => $pts) {
// get x/y offsets for polygons
$pointsStr = str_replace(',', ' ', $pts);
$pts = explode(' ', $pointsStr);
// left x
$x= floatval($pts[4]);
// top y
$y= floatval($pts[1]);
// mid y position for polygon staring point
$yPoly = $y+$polyHeight/2;
$svg .=
'<g class="field field'.$i.'" id="field'.$i.'" stroke="black" transform="translate('.$x.' '.$y.')">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
'."n";
}
$svg .= '</svg>';
// render
echo $svg;
?>
Result
<svg viewBox="0 0 500 500" fill="none" >
<defs>
<!-- hexagon -->
<polygon id="hexagon" points="0 21 12 0 36 0 48.1 21 36.1 42 12.1 42 0 21" />
<!-- icon -->
<path id="hills" d="m 10 28 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</defs>
<g class="field field0" id="field0" stroke="black" transform="translate(211.7 37.9)">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
<g class="field field1" id="field1" stroke="black" transform="translate(211.7 79.9)">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
<g class="field field2" id="field2" stroke="black" transform="translate(175.7 100.9)">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
<g class="field field3" id="field3" stroke="black" transform="translate(175.7 143)">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
<g class="field field4" id="field4" stroke="black" transform="translate(175.7 185)">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
<g class="field field5" id="field5" stroke="black" transform="translate(175.7 227)">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
<g class="field field6" id="field6" stroke="black" transform="translate(175.7 269)">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
<g class="field field7" id="field7" stroke="black" transform="translate(175.7 311.1)">
<use href="#hexagon" fill="green" />
<use href="#hills" stroke="white" />
</g>
</svg>Flattened elements (avoiding <use>)
Huge amounts of <use> elements impact the rendering performance so you may also write the <path> elements directly
<?php
$polygons = [
"247.8,37.9 223.8,37.9 211.7,58.9 223.8,79.9 247.8,79.9 259.8,58.9",
"247.8,79.9 223.8,79.9 211.7,100.9 223.8,121.9 247.8,121.9 259.8,100.9",
"211.7,100.9 187.7,100.9 175.7,121.9 187.7,143 211.7,143 223.8,121.9",
"211.7,143 187.7,143 175.7,164 187.7,185 211.7,185 223.8,164",
"211.7,185 187.7,185 175.7,206 187.7,227 211.7,227 223.8,206",
"211.7,227 187.7,227 175.7,248 187.7,269 211.7,269 223.8,248",
"211.7,269 187.7,269 175.7,290 187.7,311.1 211.7,311.1 223.8,290",
"211.7,311.1 187.7,311.1 175.7,332.1 187.7,353.1 211.7,353.1 223.8,332.1"
];
$svg =
'<svg viewBox="0 0 500 500" fill="none" >';
$polyWidth=48.1;
$polyHeight=42;
foreach ($polygons as $i => $pts) {
// get x/y offsets for polygons
$pointsStr = str_replace(',', ' ', $pts);
$pts = explode(' ', $pointsStr);
// left x
$x= floatval($pts[4]);
// top y
$y= floatval($pts[1]);
// mid y position for polygon staring point
$yPoly = $y+$polyHeight/2;
$svg .=
'<g class="field field'.$i.'" id="field'.$i.'" stroke="black">
<path d="m'.$x.' '.$yPoly.' 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m '.($x+10).' '.($y+28).' l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>'."n";
}
$svg .= '</svg>';
echo $svg;
?>
<svg viewBox="0 0 500 500" fill="none" ><g class="field field0" id="field0" stroke="black">
<path d="m211.7 58.9 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m 221.7 65.9 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>
<g class="field field1" id="field1" stroke="black">
<path d="m211.7 100.9 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m 221.7 107.9 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>
<g class="field field2" id="field2" stroke="black">
<path d="m175.7 121.9 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m 185.7 128.9 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>
<g class="field field3" id="field3" stroke="black">
<path d="m175.7 164 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m 185.7 171 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>
<g class="field field4" id="field4" stroke="black">
<path d="m175.7 206 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m 185.7 213 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>
<g class="field field5" id="field5" stroke="black">
<path d="m175.7 248 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m 185.7 255 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>
<g class="field field6" id="field6" stroke="black">
<path d="m175.7 290 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m 185.7 297 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>
<g class="field field7" id="field7" stroke="black">
<path d="m175.7 332.1 12-21 24 0 12.1 21-12 21-24 0-12.1-21z" />
<path class="hills" d="m 185.7 339.1 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" />
</g>
</svg>While this approach produces more markup it can be compressed quite efficiently with gzip because we only change the first 2 values in the relative path data.
2
Like mentioned in the comments it is mush easier to control if you know where each element is places. So, start off centering the path (both hexagon and hills etc. around 0,0). And then either group elements that need the same position or place them at the same spot (that depends on your use case) using transform/translate.
Never mind about the <symbol> element. You are better off just referencing the path elements and then give them a fill attribute on the <use> element.
.c1 {
fill: tomato;
}
.c2 {
fill: cadetblue;
}
.c3 {
fill: steelblue;
}
.c4 {
fill: orchid;
}
use[href="#hills"] {
pointer-events: none;
}
use[href="#hex"] {
cursor: pointer;
}
use[href="#hex"]:hover {
fill-opacity: .8;
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
<defs>
<path id="hex" d="m -10 -17.32 l 20 0 l 10 17.32 l -10 17.32 l -20 0 l -10 -17.32 z"
strike-width="2" stroke="black" />
<path id="hills" d="m -13 7 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10"
stroke-width="2" stroke="black" fill="none"/>
</defs>
<!-- Grouping after position -->
<g transform="translate(21 18.32)">
<use href="#hex" class="c1" />
<use href="#hills" />
</g>
<g transform="translate(84 18.32)">
<use href="#hex" class="c3" />
</g>
<g transform="translate(52.5 36.64)">
<use href="#hex" class="c2" />
</g>
<g transform="translate(84 54.96)">
<use href="#hex" class="c2" />
<use href="#hills" />
</g>
<!-- Without grouping -->
<use href="#hex" class="c4" transform="translate(21 54.96)" />
<use href="#hills" transform="translate(21 54.96)" />
</svg>1