1622 lines
28 KiB
XML
1622 lines
28 KiB
XML
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
|
|
<svg
|
|
viewBox="-5 -10 110 120"
|
|
width="100%"
|
|
version="1.1"
|
|
id="svg1"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:svg="http://www.w3.org/2000/svg">
|
|
<defs
|
|
id="defs1">
|
|
<rect
|
|
id="rect1"
|
|
width="10"
|
|
height="10"
|
|
x="-5"
|
|
y="-5" />
|
|
</defs>
|
|
<style>
|
|
rect {
|
|
fill: inherit;
|
|
}
|
|
g use {
|
|
fill: gray;
|
|
}
|
|
g:hover use {
|
|
fill: gold;
|
|
}
|
|
circle {
|
|
stroke: black;
|
|
stroke-width: 0.25px;
|
|
}
|
|
g circle {
|
|
fill: crimson;
|
|
}
|
|
/*g:hover circle {*/
|
|
/* transform: scale(3);*/
|
|
/*}*/
|
|
g#out circle {
|
|
fill: orange;
|
|
/*transform: scale(3);*/
|
|
}
|
|
</style>
|
|
<g
|
|
id="use2"
|
|
style="display:inline"
|
|
transform="translate(5,5)">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use103" />
|
|
<circle
|
|
id="circle103"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use3"
|
|
transform="translate(5,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use102" />
|
|
<circle
|
|
id="circle102"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use4"
|
|
transform="translate(5,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use201" />
|
|
<circle
|
|
id="circle201"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use5"
|
|
transform="translate(5,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use200" />
|
|
<circle
|
|
id="circle200"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use6"
|
|
transform="translate(5,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use199" />
|
|
<circle
|
|
id="circle199"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use7"
|
|
transform="translate(5,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use198" />
|
|
<circle
|
|
id="circle198"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use8"
|
|
transform="translate(5,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use197" />
|
|
<circle
|
|
id="circle197"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use9"
|
|
transform="translate(5,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use196" />
|
|
<circle
|
|
id="circle196"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use10"
|
|
transform="translate(5,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use195" />
|
|
<circle
|
|
id="circle195"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use11"
|
|
transform="translate(5,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use194" />
|
|
<circle
|
|
id="circle194"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use12"
|
|
transform="translate(15,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use193" />
|
|
<circle
|
|
id="circle193"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use13"
|
|
transform="translate(15,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use192" />
|
|
<circle
|
|
id="circle192"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use14"
|
|
transform="translate(15,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use191" />
|
|
<circle
|
|
id="circle191"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use15"
|
|
transform="translate(15,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use190" />
|
|
<circle
|
|
id="circle190"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use16"
|
|
transform="translate(15,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use189" />
|
|
<circle
|
|
id="circle189"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use17"
|
|
transform="translate(15,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use188" />
|
|
<circle
|
|
id="circle188"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use18"
|
|
transform="translate(15,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use187" />
|
|
<circle
|
|
id="circle187"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use19"
|
|
transform="translate(15,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use186" />
|
|
<circle
|
|
id="circle186"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use20"
|
|
transform="translate(15,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use185" />
|
|
<circle
|
|
id="circle185"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use21"
|
|
transform="translate(15,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use184" />
|
|
<circle
|
|
id="circle184"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use22"
|
|
transform="translate(25,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use183" />
|
|
<circle
|
|
id="circle183"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use23"
|
|
transform="translate(25,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use182" />
|
|
<circle
|
|
id="circle182"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use24"
|
|
transform="translate(25,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use181" />
|
|
<circle
|
|
id="circle181"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use25"
|
|
transform="translate(25,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use180" />
|
|
<circle
|
|
id="circle180"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use26"
|
|
transform="translate(25,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use179" />
|
|
<circle
|
|
id="circle179"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use27"
|
|
transform="translate(25,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use178" />
|
|
<circle
|
|
id="circle178"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use28"
|
|
transform="translate(25,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use177" />
|
|
<circle
|
|
id="circle177"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use29"
|
|
transform="translate(25,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use176" />
|
|
<circle
|
|
id="circle176"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use30"
|
|
transform="translate(25,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use175" />
|
|
<circle
|
|
id="circle175"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use31"
|
|
transform="translate(25,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use174" />
|
|
<circle
|
|
id="circle174"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use32"
|
|
transform="translate(35,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use173" />
|
|
<circle
|
|
id="circle173"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use33"
|
|
transform="translate(35,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use172" />
|
|
<circle
|
|
id="circle172"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use34"
|
|
transform="translate(35,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use171" />
|
|
<circle
|
|
id="circle171"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use35"
|
|
transform="translate(35,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use170" />
|
|
<circle
|
|
id="circle170"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use36"
|
|
transform="translate(35,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use169" />
|
|
<circle
|
|
id="circle169"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use37"
|
|
transform="translate(35,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use168" />
|
|
<circle
|
|
id="circle168"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use38"
|
|
transform="translate(35,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use167" />
|
|
<circle
|
|
id="circle167"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use39"
|
|
transform="translate(35,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use166" />
|
|
<circle
|
|
id="circle166"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use40"
|
|
transform="translate(35,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use165" />
|
|
<circle
|
|
id="circle165"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use41"
|
|
transform="translate(35,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use164" />
|
|
<circle
|
|
id="circle164"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use42"
|
|
transform="translate(45,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use163" />
|
|
<circle
|
|
id="circle163"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use43"
|
|
transform="translate(45,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use162" />
|
|
<circle
|
|
id="circle162"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use44"
|
|
transform="translate(45,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use161" />
|
|
<circle
|
|
id="circle161"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use45"
|
|
transform="translate(45,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use160" />
|
|
<circle
|
|
id="circle160"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use46"
|
|
transform="translate(45,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use159" />
|
|
<circle
|
|
id="circle159"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use47"
|
|
transform="translate(45,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use158" />
|
|
<circle
|
|
id="circle158"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use48"
|
|
transform="translate(45,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use157" />
|
|
<circle
|
|
id="circle157"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use49"
|
|
transform="translate(45,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use156" />
|
|
<circle
|
|
id="circle156"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use50"
|
|
transform="translate(45,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use155" />
|
|
<circle
|
|
id="circle155"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use51"
|
|
transform="translate(45,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use154" />
|
|
<circle
|
|
id="circle154"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use52"
|
|
transform="translate(55,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use153" />
|
|
<circle
|
|
id="circle153"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use53"
|
|
transform="translate(55,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use152" />
|
|
<circle
|
|
id="circle152"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use54"
|
|
transform="translate(55,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use151" />
|
|
<circle
|
|
id="circle151"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use55"
|
|
transform="translate(55,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use150" />
|
|
<circle
|
|
id="circle150"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use56"
|
|
transform="translate(55,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use149" />
|
|
<circle
|
|
id="circle149"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use57"
|
|
transform="translate(55,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use148" />
|
|
<circle
|
|
id="circle148"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use58"
|
|
transform="translate(55,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use147" />
|
|
<circle
|
|
id="circle147"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use59"
|
|
transform="translate(55,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use146" />
|
|
<circle
|
|
id="circle146"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use60"
|
|
transform="translate(55,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use145" />
|
|
<circle
|
|
id="circle145"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use61"
|
|
transform="translate(55,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use144" />
|
|
<circle
|
|
id="circle144"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use62"
|
|
transform="translate(65,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use143" />
|
|
<circle
|
|
id="circle143"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use63"
|
|
transform="translate(65,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use142" />
|
|
<circle
|
|
id="circle142"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use64"
|
|
transform="translate(65,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use141" />
|
|
<circle
|
|
id="circle141"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use65"
|
|
transform="translate(65,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use140" />
|
|
<circle
|
|
id="circle140"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use66"
|
|
transform="translate(65,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use139" />
|
|
<circle
|
|
id="circle139"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use67"
|
|
transform="translate(65,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use138" />
|
|
<circle
|
|
id="circle138"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use68"
|
|
transform="translate(65,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use137" />
|
|
<circle
|
|
id="circle137"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use69"
|
|
transform="translate(65,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use136" />
|
|
<circle
|
|
id="circle136"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use70"
|
|
transform="translate(65,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use135" />
|
|
<circle
|
|
id="circle135"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use71"
|
|
transform="translate(65,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use134" />
|
|
<circle
|
|
id="circle134"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use72"
|
|
transform="translate(75,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use133" />
|
|
<circle
|
|
id="circle133"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use73"
|
|
transform="translate(75,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use132" />
|
|
<circle
|
|
id="circle132"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use74"
|
|
transform="translate(75,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use131" />
|
|
<circle
|
|
id="circle131"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use75"
|
|
transform="translate(75,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use130" />
|
|
<circle
|
|
id="circle130"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use76"
|
|
transform="translate(75,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use129" />
|
|
<circle
|
|
id="circle129"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use77"
|
|
transform="translate(75,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use128" />
|
|
<circle
|
|
id="circle128"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use78"
|
|
transform="translate(75,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use127" />
|
|
<circle
|
|
id="circle127"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use79"
|
|
transform="translate(75,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use126" />
|
|
<circle
|
|
id="circle126"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use80"
|
|
transform="translate(75,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use125" />
|
|
<circle
|
|
id="circle125"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use81"
|
|
transform="translate(75,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use124" />
|
|
<circle
|
|
id="circle124"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use82"
|
|
transform="translate(85,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use123" />
|
|
<circle
|
|
id="circle123"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use83"
|
|
transform="translate(85,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use122" />
|
|
<circle
|
|
id="circle122"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use84"
|
|
transform="translate(85,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use121" />
|
|
<circle
|
|
id="circle121"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use85"
|
|
transform="translate(85,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use120" />
|
|
<circle
|
|
id="circle120"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use86"
|
|
transform="translate(85,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use119" />
|
|
<circle
|
|
id="circle119"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use87"
|
|
transform="translate(85,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use118" />
|
|
<circle
|
|
id="circle118"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use88"
|
|
transform="translate(85,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use117" />
|
|
<circle
|
|
id="circle117"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use89"
|
|
transform="translate(85,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use116" />
|
|
<circle
|
|
id="circle116"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use90"
|
|
transform="translate(85,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use115" />
|
|
<circle
|
|
id="circle115"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use91"
|
|
transform="translate(85,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use114" />
|
|
<circle
|
|
id="circle114"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use92"
|
|
transform="translate(95,5)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use113" />
|
|
<circle
|
|
id="circle113"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use93"
|
|
transform="translate(95,15)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use112" />
|
|
<circle
|
|
id="circle112"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use94"
|
|
transform="translate(95,25)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use111" />
|
|
<circle
|
|
id="circle111"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use95"
|
|
transform="translate(95,35)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use110" />
|
|
<circle
|
|
id="circle110"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use96"
|
|
transform="translate(95,45)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use109" />
|
|
<circle
|
|
id="circle109"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use97"
|
|
transform="translate(95,55)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use108" />
|
|
<circle
|
|
id="circle108"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use98"
|
|
transform="translate(95,65)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use107" />
|
|
<circle
|
|
id="circle107"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use99"
|
|
transform="translate(95,75)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use106" />
|
|
<circle
|
|
id="circle106"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use100"
|
|
transform="translate(95,85)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use105" />
|
|
<circle
|
|
id="circle105"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g
|
|
id="use101"
|
|
transform="translate(95,95)"
|
|
style="display:inline">
|
|
<use
|
|
x="0"
|
|
y="0"
|
|
xlink:href="#rect1"
|
|
id="use104" />
|
|
<circle
|
|
id="circle104"
|
|
cx="0"
|
|
cy="0"
|
|
r="2.5" />
|
|
</g>
|
|
<g id="out"/>
|
|
<script>//<![CDATA[
|
|
const svg = document.querySelector('svg');
|
|
const out = document.querySelector('#out');
|
|
const store = new Map();
|
|
|
|
//svg.addEventListener('pointerout', e => {
|
|
// if (e.target !== svg)
|
|
// console.log('SVG pointerout', 'from', e.target?.parentElement, 'to', e.relatedTarget?.parentElement);
|
|
//});
|
|
|
|
//const tiles = svg.querySelector('
|
|
|
|
svg.addEventListener('pointerover', e => {
|
|
console.log('SVG pointerover', e.target.closest('g'));
|
|
const g = e.target.closest('g:not(#out)');
|
|
|
|
if (g && g.querySelector('circle')) {
|
|
out.setAttributeNS(null, 'transform', g.getAttributeNS(null, 'transform'));
|
|
const circle = g.querySelector('circle');
|
|
store.set(circle, g);
|
|
out.append(circle);
|
|
}
|
|
//if (e.target.tagName === 'use') {
|
|
// out.setAttributeNS(null, 'transform', e.target.getAttribute
|
|
//}
|
|
});
|
|
|
|
svg.addEventListener('pointerout', e => {
|
|
console.log('pointer out target', e.target);
|
|
const g = e.target.closest('g');
|
|
if (g) {
|
|
if (g.id === 'out') {
|
|
console.log('SVG pointerout OUT', store.get(e.target));
|
|
[...out.children].forEach(child => {
|
|
store.get(child).append(child);
|
|
store.delete(child);
|
|
});
|
|
} else {
|
|
console.log('SVG pointerout', e.target.closest('g'));
|
|
[...out.children].forEach(child => {
|
|
console.log('child', child, 'belongs to', store.get(child));
|
|
console.log('relatedTarget', e.relatedTarget);
|
|
if (store.get(child) !== g || !e.relatedTarget) {
|
|
console.log('returning to', store.get(child));
|
|
store.get(child).append(child);
|
|
store.delete(child);
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
console.log('SVG pointerout', e.target);
|
|
[...out.children].forEach(child => {
|
|
store.get(child).append(child);
|
|
store.delete(child);
|
|
});
|
|
}
|
|
});
|
|
|
|
//document.querySelectorAll('g:not(#out)').forEach(g => {
|
|
// const circle = g.querySelector('circle');
|
|
//
|
|
// g.addEventListener('pointerover', e => {
|
|
// console.log('pointer over', g.id);
|
|
// svg.append(g);
|
|
// circle.setAttributeNS(null, 'transform', 'scale(3)');
|
|
// });
|
|
//
|
|
// g.addEventListener('pointerleave', e => {
|
|
// console.log('pointer leave', g.id);
|
|
// circle.removeAttributeNS(null, 'transform');
|
|
// });
|
|
//})
|
|
//]]>
|
|
</script>
|
|
</svg>
|