// svgCompass.js
(function () {
/* global AdventureJS A */
var p = AdventureJS.Display.prototype;
/**
*/
p.svgCompass = `
<svg class="ajs-compass" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<rect class="ajs-compass-hover-trap" width="100" height="100"/>
<circle class="rose1 bezel outer background" cx="50" cy="50" r="45.5"/>
<circle class="rose1 bezel inner background" cx="50" cy="50" r="43.5"/>
<rect class="rose2 rect outer background" x="0" y="0" width="99.9" height="79.3"/>
<rect class="rose2 rect inner background" x="2.1" y="2.1" width="95.9" height="75.3"/>
<circle class="rose2 bezel outer background" cx="50" cy="39.5" r="36.3"/>
<circle class="rose2 bezel inner background" cx="50" cy="39.5" r="34.7"/>
<g class="map middle">
<circle class="stroke" cx="50" cy="44" r="5" />
</g>
<g class="northwest ajs-compass-direction ordinal"
data-exit="northwest" role="button" aria-label="northwest">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="0 35.4 0 0 35.4 0 0 35.4"/>
<polygon class="rock fill inner" points="0 30 0 0 30 0 0 30"/>
<polygon class="rose1 fill outer" points="50 50 41.2 28.8 19.6 19.6 28.7 41.2 50 50"/>
<polygon class="rose1 fill inner" points="45.7 45.8 39.4 30.5 23.9 23.8 30.4 39.4 45.7 45.8"/>
<polygon class="rose2 fill outer" points="50 39.5 43 22.6 25.7 15.2 33 32.5 50 39.5"/>
<polygon class="rose2 fill inner" points="46.6 36.1 41.5 23.9 29.2 18.6 34.4 31 46.6 36.1"/>
<rect class="grid1 fill outer" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="1.6" y="2" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" width="32" height="25" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="2" y="2" width="28" height="21" rx=".4" ry=".4"/>
<rect class="map hit" width="44" height="12" rx="0.4" ry="0.2" x="0" y="10"/>
<path class="map burst northwest stroke" d="M 47,40 28,21" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(12 12) rotate(-45)"><tspan x="0" y="0">NW</tspan></text>
<text class="text rose1" transform="translate(34 36)"><tspan x="0" y="0">NW</tspan></text>
<text class="text rose2" transform="translate(39 30)"><tspan x="0" y="0">NW</tspan></text>
<text class="text grid1" transform="translate(16 11.6)" text-anchor="middle"><tspan x="0" y="0">NW</tspan></text>
<text class="text grid2" transform="translate(16 15)" text-anchor="middle"><tspan x="0" y="0">NW</tspan></text>
<text class="text map" transform="translate(22 18)" text-anchor="middle"><tspan x="0" y="0">NORTHWEST</tspan></text>
</g>
</g>
<g class="north ajs-compass-direction cardinal"
data-exit="north" role="button" aria-label="north">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="20 20 80.1 20 59.9 0 40.1 0 20 20"/>
<polygon class="rock fill inner" points="70 15.5 54.2 0 45.8 0 30 15.5 70 15.58"/>
<polygon class="rose1 fill outer" points="50 50 58.8 28.8 50 7 41.2 28.8 50 50"/>
<polygon class="rose1 fill inner" points="50 44 56.3 28.7 50 13 43.7 28.7 50 44"/>
<polygon class="rose2 fill outer" points="50 39.5 57 22.6 50 5.2 43 22.6 50 39.5"/>
<polygon class="rose2 fill inner" points="50 34.7 55 22.5 50 10 45 22.5 50 34.7"/>
<rect class="grid1 fill outer" x="34" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="35.6" y="2" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="34" width="32" height="25" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="36" y="2" width="28" height="21" rx=".4" ry=".4"/>
<rect class="map hit" x="34" y="20" width="32" height="12" rx=".4" ry=".4"/>
<path class="map burst north stroke" d="M 50,39 V 31" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(50 11)"><tspan x="0" y="0">N</tspan></text>
<text class="text rose1" transform="translate(50 29.9)"><tspan x="0" y="0">N</tspan></text>
<text class="text rose2" transform="translate(50 25.5)"><tspan x="0" y="0">N</tspan></text>
<text class="text grid1" transform="translate(50 11.1)" text-anchor="middle"><tspan x="0" y="0">NORTH</tspan></text>
<text class="text grid2" transform="translate(50 15)" text-anchor="middle"><tspan x="0" y="0">NORTH</tspan></text>
<text class="text map" transform="translate(50 28)" text-anchor="middle"><tspan x="0" y="0">NORTH</tspan></text>
</g>
</g>
<g class="northeast ajs-compass-direction ordinal"
data-exit="northeast" role="button" aria-label="northeast">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="64.6 0 100 0 100 35.4 64.6 0"/>
<polygon class="rock fill inner" points="70 0 100 0 100 30 70 0"/>
<polygon class="rose1 fill outer" points="50 50 71.3 41.2 80.4 19.7 58.8 28.8 50 50"/>
<polygon class="rose1 fill inner" points="54.3 45.8 69.6 39.5 76.1 23.9 60.6 30.5 54.3 45.8"/>
<polygon class="rose2 fill outer" points="50 39.5 67 32.5 74.3 15.3 57 22.6 50 39.5"/>
<polygon class="rose2 fill inner" points="53.4 36.1 65.6 31.1 70.8 18.7 58.5 23.9 53.4 36.1"/>
<rect class="grid1 fill outer" x="68" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="69.6" y="2" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="68" y="0" width="32" height="25" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="70" y="2" width="28" height="21" rx=".4" ry=".4"/>
<rect class="map hit" y="10" x="54" width="44" height="12" rx=".4" ry=".4"/>
<path class="map burst northeast stroke" d="M 53,40 70,21" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(89 12) rotate(45)"><tspan x="0" y="0">NE</tspan></text>
<text class="text rose1" transform="translate(65 36)"><tspan x="0" y="0">NE</tspan></text>
<text class="text rose2" transform="translate(61.7 30.3)"><tspan x="0" y="0">NE</tspan></text>
<text class="text grid1" transform="translate(84 11.1)" text-anchor="middle"><tspan x="0" y="0">NE</tspan></text>
<text class="text grid2" transform="translate(84 15)" text-anchor="middle"><tspan x="0" y="0">NE</tspan></text>
<text class="text map" transform="translate(76 18)" text-anchor="middle"><tspan x="0" y="0">NORTHEAST</tspan></text>
</g>
</g>
<g class="west ajs-compass-direction cardinal"
data-exit="west" role="button" aria-label="west">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="0 40.1 0 59.9 20 80.1 20 20.1 0 40.1"/>
<polygon class="rock fill inner" points="15.5 30 0 45.8 0 54.2 15.5 70 15.5 30"/>
<polygon class="rose1 fill outer" points="50 50 28.7 41.2 7 50 28.7 58.8 50 50"/>
<polygon class="rose1 fill inner" points="44 50 28.7 43.7 13 50 28.7 56.4 44 50"/>
<polygon class="rose2 fill outer" points="50 39.5 33 32.5 15.7 39.5 33 46.5 50 39.5"/>
<polygon class="rose2 fill inner" points="45.2 39.5 33 34.5 20.5 39.5 33 44.6 45.2 39.5"/>
<rect class="grid1 fill outer" y="19.9" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="1.6" y="21.8" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="0" y="27" width="32" height="25" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="2" y="29" width="28" height="21" rx=".4" ry=".4"/>
<rect class="map hit" y="38" width="32" height="12" rx=".4" ry=".4"/>
<path class="map burst west stroke" d="M 45,44 H 27" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(8 53)"><tspan x="0" y="0">W</tspan></text>
<text class="text rose1" transform="translate(25 52.3)"><tspan x="0" y="0">W</tspan></text>
<text class="text rose2" transform="translate(33.5 41.3)"><tspan x="0" y="0">W</tspan></text>
<text class="text grid1" transform="translate(16 31)" text-anchor="middle"><tspan x="0" y="0">WEST</tspan></text>
<text class="text grid2" transform="translate(16 42)" text-anchor="middle"><tspan x="0" y="0">WEST</tspan></text>
<text class="text map" transform="translate(16 46)" text-anchor="middle"><tspan x="0" y="0">WEST</tspan></text>
</g>
</g>
<g class="east ajs-compass-direction cardinal"
data-exit="east" role="button" aria-label="east">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="80 20 80 80.1 100 59.9 100 40.1 80 20"/>
<polygon class="rock fill inner" points="84.5 70 100 54.2 100 45.8 84.5 30 84.5 70"/>
<polygon class="rose1 fill outer" points="50 50 71.3 58.8 93 50 71.3 41.2 50 50"/>
<polygon class="rose1 fill inner" points="56 50 71.3 56.4 87 50 71.3 43.7 56 50"/>
<polygon class="rose2 fill outer" points="50 39.5 67 46.5 84.3 39.5 67 32.5 50 39.5"/>
<polygon class="rose2 fill inner" points="54.8 39.5 67 44.6 79.5 39.5 67 34.5 54.8 39.5"/>
<rect class="grid1 fill outer" x="68" y="19.9" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="69.6" y="21.8" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="68" y="27" width="32" height="25" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="70" y="29" width="28" height="21" rx=".4" ry=".4"/>
<rect class="map hit" x="68" y="38" width="32" height="12" rx=".4" ry=".4"/>
<path class="map burst east stroke" d="M 55,44 72,44" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(92 53)"><tspan x="0" y="0">E</tspan></text>
<text class="text rose1" transform="translate(71 52.3)"><tspan x="0" y="0">E</tspan></text>
<text class="text rose2" transform="translate(67 41.8)"><tspan x="0" y="0">E</tspan></text>
<text class="text grid1" transform="translate(84 31)" text-anchor="middle"><tspan x="0" y="0">EAST</tspan></text>
<text class="text grid2" transform="translate(84 42)" text-anchor="middle"><tspan x="0" y="0">EAST</tspan></text>
<text class="text map" transform="translate(84 46)" text-anchor="middle"><tspan x="0" y="0">EAST</tspan></text>
</g>
</g>
<g class="southwest ajs-compass-direction ordinal"
data-exit="southwest" role="button" aria-label="southwest">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="0 64.6 0 100 35.4 100 0 64.6"/>
<polygon class="rock fill inner" points="0 70 0 100 30 100 0 70"/>
<polygon class="rose1 fill outer" points="50 50 28.7 58.8 19.6 80.4 41.2 71.3 50 50"/>
<polygon class="rose1 fill inner" points="45.7 54.3 30.4 60.6 23.9 76.2 39.4 69.6 45.7 54.3"/>
<polygon class="rose2 fill outer" points="50 39.5 33 46.5 25.7 63.8 43 56.5 50 39.5"/>
<polygon class="rose2 fill inner" points="46.6 42.9 34.4 48 29.2 60.4 41.5 55.1 46.6 42.9"/>
<rect class="grid1 fill outer" y="40.2" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="1.6" y="42.1" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="0" y="54" width="32" height="25" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="2" y="56" width="28" height="21" rx=".4" ry=".4"/>
<rect class="map hit" y="68" width="44" height="12" rx=".4" ry=".4"/>
<path class="map burst southwest stroke" d="M 47,48 26,69" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(8 92) rotate(45)"><tspan x="0" y="0">SW</tspan></text>
<text class="text rose1" transform="translate(34 68.5)"><tspan x="0" y="0">SW</tspan></text>
<text class="text rose2" transform="translate(38 54)"><tspan x="0" y="0">SW</tspan></text>
<text class="text grid1" transform="translate(16 51.3)" text-anchor="middle"><tspan x="0" y="0">SW</tspan></text>
<text class="text grid2" transform="translate(16 69)" text-anchor="middle"><tspan x="0" y="0">SW</tspan></text>
<text class="text map" transform="translate(22 76)" text-anchor="middle"><tspan x="0" y="0">SOUTHWEST</tspan></text>
</g>
</g>
<g class="south ajs-compass-direction cardinal"
data-exit="south" role="button" aria-label="south">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="40.1 100 59.9 100 80.3 80 20 80 40.1 100"/>
<polygon class="rock fill inner" points="30 84.5 45.8 100 54.2 100 70 84.5 30 84.5"/>
<polygon class="rose1 fill outer" points="50 50 41.2 71.3 50 93 58.8 71.3 50 50"/>
<polygon class="rose1 fill inner" points="50 56.1 43.7 71.4 50 87 56.3 71.4 50 56.1"/>
<polygon class="rose2 fill outer" points="50 39.5 43 56.5 50 73.8 57 56.5 50 39.5"/>
<polygon class="rose2 fill inner" points="50 44.4 45 56.6 50 69 55 56.6 50 44.4"/>
<rect class="grid1 fill outer" x="34" y="40.2" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="35.6" y="42.1" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="34" y="54" width="32" height="25" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="36" y="56" width="28" height="21" rx=".4" ry=".4"/>
<rect class="map hit" x="34" y="58" width="32" height="12" rx=".4" ry=".4"/>
<path class="map burst south stroke" d="m 50,49 v 9" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(50 94)"><tspan x="0" y="0">S</tspan></text>
<text class="text rose1" transform="translate(50 75)"><tspan x="0" y="0">S</tspan></text>
<text class="text rose2" transform="translate(50 59)"><tspan x="0" y="0">S</tspan></text>
<text class="text grid1" transform="translate(50 51.3)" text-anchor="middle"><tspan x="0" y="0">SOUTH</tspan></text>
<text class="text grid2" transform="translate(50 69)" text-anchor="middle"><tspan x="0" y="0">SOUTH</tspan></text>
<text class="text map" transform="translate(50 66)" text-anchor="middle"><tspan x="0" y="0">SOUTH</tspan></text>
</g>
</g>
<g class="southeast ajs-compass-direction ordinal"
data-exit="southeast" role="button" aria-label="southeast">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="64.6 100 100 100 100 64.6 64.6 100"/>
<polygon class="rock fill inner" points="70 100 100 100 100 70 70 100"/>
<polygon class="rose1 fill outer" points="50 50 58.8 71.3 80.4 80.4 71.3 58.8 50 50"/>
<polygon class="rose1 fill inner" points="54.3 54.3 60.6 69.6 76.1 76.2 69.6 60.6 54.3 54.3"/>
<polygon class="rose2 fill outer" points="50 39.5 57 56.5 74.3 63.8 67 46.5 50 39.5"/>
<polygon class="rose2 fill inner" points="53.4 42.9 58.5 55.1 70.8 60.4 65.6 48 53.4 42.9"/>
<rect class="grid1 fill outer" x="68" y="40.2" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="69.6" y="42.1" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="68" y="54" width="32" height="25" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="70" y="56" width="28" height="21" rx=".4" ry=".4"/>
<rect class="map hit" x="56" y="68" width="44" height="12" rx=".4" ry=".4"/>
<path class="map burst southeast stroke" d="m 54,48 19,21" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(92 92) rotate(-45)"><tspan x="0" y="0">SE</tspan></text>
<text class="text rose1" transform="translate(65 69)"><tspan x="0" y="0">SE</tspan></text>
<text class="text rose2" transform="translate(62 54)"><tspan x="0" y="0">SE</tspan></text>
<text class="text grid1" transform="translate(84 51.3)" text-anchor="middle"><tspan x="0" y="0">SE</tspan></text>
<text class="text grid2" transform="translate(84 69)" text-anchor="middle"><tspan x="0" y="0">SE</tspan></text>
<text class="text map" transform="translate(78 76)" text-anchor="middle"><tspan x="0" y="0">SOUTHEAST</tspan></text>
</g>
</g>
<g class="up ajs-compass-direction "
data-exit="up" role="button" aria-label="up">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="22.5 77.3 50 49.8 77.5 77.3 22.5 77.3"/>
<polygon class="rock fill inner" points="32 73.3 50 55.4 68 73.3 32 73.3"/>
<path class="rose1 fill outer" d="M31.8,6.1c-11.6,4.8-20.9,14.1-25.7,25.8l-6.1-2.6V0h29.2l2.5,6.1Z"/>
<path class="rose1 fill inner" d="M4.7,28.8c4.9-10.5,13.5-19.1,24-24l-.9-2.1H3v25.4l1.7.7Z"/>
<rect class="rose2 fill outer" x="49" y="82" width="20" height="16" rx=".4" ry=".4"/>
<rect class="rose2 fill inner" x="51" y="84" width="16" height="14" rx=".4" ry=".4"/>
<rect class="grid1 fill outer" x="34" y="61.9" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="35.6" y="63.9" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="49" y="82" width="20" height="16" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="51" y="84" width="16" height="14" rx=".4" ry=".4"/>
<rect class="map hit" x="34" y="0" width="32" height="20" rx=".4" ry=".4"/>
<path class="map burst up stroke" d="M 50,10 V 4" />
<path class="map burst up stroke" d="M 53,7 50,4 47,7" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(50 68)"><tspan x="0" y="0">U</tspan></text>
<text class="text rose1" transform="translate(12 12)"><tspan x="0" y="0">U</tspan></text>
<text class="text rose2 ioud" transform="translate(59 92)"><tspan x="0" y="0">UP</tspan></text>
<text class="text grid1" transform="translate(50 73)" text-anchor="middle"><tspan x="0" y="0">UP</tspan></text>
<text class="text grid2 ioud" transform="translate(59 92)"><tspan x="0" y="0">UP</tspan></text>
<text class="text map" transform="translate(50 17)" text-anchor="middle"><tspan x="0" y="0">UP</tspan></text>
</g>
</g>
<g class="down ajs-compass-direction "
data-exit="down" role="button" aria-label="down">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="22.5 22.4 50 49.8 77.5 22.4 22.5 22.4"/>
<polygon class="rock fill inner" points="32 26.3 50 44.3 68 26.3 32 26.3"/>
<path class="rose1 fill outer" d="M6.1,68.2c4.8,11.6,14.1,20.9,25.8,25.7l-2.6,6.1H0v-29.2l6.1-2.5Z"/>
<path class="rose1 fill inner" d="M28.8,95.3c-10.5-4.9-19.1-13.5-24-24l-2.1.9v24.8h25.4l.7-1.7Z"/>
<rect class="rose2 fill outer" x="71" y="82" width="27" height="16" rx=".4" ry=".4"/>
<rect class="rose2 fill inner" x="73" y="84" width="23" height="14" rx=".4" ry=".4"/>
<rect class="grid1 fill outer" x="34" y="82" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="35.6" y="84" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="71" y="82" width="27" height="16" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="73" y="84" width="23" height="14" rx=".4" ry=".4"/>
<rect class="map hit" x="34" y="78" width="32" height="22" rx=".4" ry=".4"/>
<path class="map burst down stroke" d="M 50,97 V 90" />
<path class="map burst down stroke" d="M 53,93 50,97 47,93" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(50 36)"><tspan x="0" y="0">D</tspan></text>
<text class="text rose1" transform="translate(12 92)"><tspan x="0" y="0">D</tspan></text>
<text class="text rose2 ioud" transform="translate(84 92)"><tspan x="0" y="0">DOWN</tspan></text>
<text class="text grid1" transform="translate(50 93.1)" text-anchor="middle" text-anchor="middle"><tspan x="0" y="0">DOWN</tspan></text>
<text class="text grid2 ioud" transform="translate(84 92)"><tspan x="0" y="0">DOWN</tspan></text>
<text class="text map" transform="translate(50 87)" text-anchor="middle" text-anchor="middle"><tspan x="0" y="0">DOWN</tspan></text>
</g>
</g>
<g class="in ajs-compass-direction "
data-exit="in" role="button" aria-label="in">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="22.5 77.3 49.9 49.8 22.5 22.4 22.5 77.3"/>
<polygon class="rock fill inner" points="26.4 67.8 44.4 49.8 26.4 31.9 26.4 67.8"/>
<path class="rose1 fill outer" d="M68.2,93.9c11.6-4.8,20.9-14.1,25.7-25.8l6.1,2.6v29.3h-29.2s-2.5-6.1-2.5-6.1Z"/>
<path class="rose1 fill inner" d="M95.3,71.2c-4.9,10.5-13.5,19.1-24,24l.9,2.1h24.8s0-25.4,0-25.4l-1.7-.7Z"/>
<rect class="rose2 fill outer" x="2" y="82" width="20" height="16" rx=".4" ry=".4"/>
<rect class="rose2 fill inner" x="4" y="84" width="16" height="14" rx=".4" ry=".4"/>
<rect class="grid1 fill outer" y="72.3" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="1.6" y="74.3" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="2" y="82" width="20" height="16" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="4" y="84" width="16" height="14" rx=".4" ry=".4"/>
<rect class="map hit" x="0" y="82" width="28" height="12" rx=".4" ry=".4"/>
<path class="map burst in stroke" d="m 1,88 h 6" />
<path class="map burst in stroke" d="m 8,91 3,-3 -3,-3" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(33 53)"><tspan x="0" y="0">I</tspan></text>
<text class="text rose1" transform="translate(88 92)"><tspan x="0" y="0">I</tspan></text>
<text class="text rose2 ioud" transform="translate(12 92)"><tspan x="0" y="0">IN</tspan></text>
<text class="text grid1" transform="translate(16 83.4)" text-anchor="middle"><tspan x="0" y="0">IN</tspan></text>
<text class="text grid2 ioud" transform="translate(12 92)"><tspan x="0" y="0">IN</tspan></text>
<text class="text map" transform="translate(16 90)" text-anchor="middle"><tspan x="0" y="0">IN</tspan></text>
</g>
</g>
<g class="out ajs-compass-direction "
data-exit="out" role="button" aria-label="out">
<g class="ajs-compass-shape">
<polygon class="rock fill outer" points="77.5 77.3 50 49.8 77.5 22.4 77.5 77.3"/>
<polygon class="rock fill inner" points="73.6 67.8 55.6 49.8 73.6 31.9 73.6 67.8"/>
<path class="rose1 fill outer" d="M93.9,31.8c-4.8-11.6-14.1-20.9-25.8-25.7l2.6-6.1h29.3v29.2s-6.1,2.5-6.1,2.5Z"/>
<path class="rose1 fill inner" d="M71.2,4.7c10.5,4.9,19.1,13.5,24,24l2.1-.9V3s-25.4,0-25.4,0l-.7,1.7Z"/>
<rect class="rose2 fill outer" x="25" y="82" width="22" height="16" rx=".4" ry=".4"/>
<rect class="rose2 fill inner" x="27" y="84" width="18" height="14" rx=".4" ry=".4"/>
<rect class="grid1 fill outer" x="68" y="72.3" width="32" height="18" rx=".4" ry=".4"/>
<rect class="grid1 fill inner" x="69.6" y="74.3" width="28.8" height="14" rx=".4" ry=".4"/>
<rect class="grid2 fill outer" x="25" y="82" width="22" height="16" rx=".4" ry=".4"/>
<rect class="grid2 fill inner" x="27" y="84" width="18" height="14" rx=".4" ry=".4"/>
<rect class="map hit" x="72" y="82" width="28" height="12" rx=".4" ry=".4"/>
<path class="map burst out stroke" d="M 96,88 H 90" />
<path class="map burst out stroke" d="m 94,85 3,3 -3,3" />
</g>
<g class="ajs-compass-label">
<text class="text rock" transform="translate(67 53)"><tspan x="0" y="0">O</tspan></text>
<text class="text rose1" transform="translate(88 12)"><tspan x="0" y="0">O</tspan></text>
<text class="text rose2 ioud" transform="translate(36 92)"><tspan x="0" y="0">OUT</tspan></text>
<text class="text grid1" transform="translate(84 83.4)" text-anchor="middle"><tspan x="0" y="0">OUT</tspan></text>
<text class="text grid2 ioud" transform="translate(36 92)"><tspan x="0" y="0">OUT</tspan></text>
<text class="text map" transform="translate(82 90)" text-anchor="middle"><tspan x="0" y="0">OUT</tspan></text>
</g>
</g>
</svg>
`;
})();