How to work with SVG?

Question

css

I generated a simple SVG image, inserted it into html https://jsfiddle.net/bpzqah0u/
Several questions arose:
1) 4 squares, and 6 path blocks, how to highlight the structure responsible for one square (to colorize it inside, for example, or hang up a reaction to a click?)
2) Sometimes (example below) they use data-path and sometimes just path, as in this case. What is the difference between them? I embedded all the coordinates from path into six div blocks but the image broke as a result...

<path
       style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 71.059523,93.648807 112.78774,92.538811"
       id="path3688"
       inkscape:connector-curvature="0" />


<div class="mapArea" data-path="M306,11 415,42 389,86 284,28z"></div>

Answer 1

there are two last-child : one last in div second in body

Answer 2

Well, in general, each square should be on a separate layer.

svg code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
   viewBox="0 0 1000 297"
   height="297mm"
   width="400mm">
    <g
       transform="translate(0)"
       id="g4523">
      <rect
         style="fill:red;stroke:#000000;"
         id="rect3680"
         width="213.81561"
         height="243.7498"
         x="90.871643"
         y="30.799549" />

      <rect
         style="fill:green;stroke:#000000;"
         id="rect4488"
         width="224.50641"
         height="245.88795"
         x="304.68726"
         y="30.799549" />

      <rect
         style="fill:blue;stroke:#000000;"
         id="rect4488-0"
         width="224.50642"
         height="245.88797"
         x="529.19366"
         y="30.799549" />

      <rect
         style="fill:orange;stroke:#000000;"
         id="rect4488-5"
         width="224.50642"
         height="245.88797"
         x="753.70007"
         y="30.799549" />
    </g>
  </g>
</svg>

And so we get each element separately, each individually you can set your own image or what is <defs></defs>required
. d