How to differentiate clones to color certain parts of SVG

Navigation
0
Following my series of questions to solve this, I would like a tip on how to differentiate these clones that are generated because I would like to paint only one slice at a time. The idea is to click on a space, it turns black, and color the other gray of your slice, without affecting the external to it.

SVG is like this now: 

    <!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Título da página</title>
        <meta charset="utf-8">
        <link href="diabo.css" rel="stylesheet" type="text/css">
    </head>
<body>
    <div>
    <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"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       width="180mm"
       height="150mm"
       viewBox="0 0 180 150"
       version="1.1"
       id="svg9212"
       inkscape:version="0.92.3 (2405546, 2018-03-11)"
       sodipodi:docname="slicedoslicesliciado.svg">
      <defs
         id="defs9206" />
      <sodipodi:namedview
         id="base"
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1.0"
         inkscape:pageopacity="0.0"
         inkscape:pageshadow="2"
         inkscape:zoom="1.4142136"
         inkscape:cx="355.84436"
         inkscape:cy="202.15073"
         inkscape:document-units="mm"
         inkscape:current-layer="layer1"
         showgrid="false"
         inkscape:measure-start="135.294,489.325"
         inkscape:measure-end="508.197,760.214"
         inkscape:window-width="1920"
         inkscape:window-height="1017"
         inkscape:window-x="-8"
         inkscape:window-y="-8"
         inkscape:window-maximized="1"
         showguides="true"
         inkscape:guide-bbox="true">
        <sodipodi:guide
           position="178.66968,28.624566"
           orientation="0,1"
           id="guide23070"
           inkscape:locked="false" />
      </sodipodi:namedview>
      <metadata
         id="metadata9209">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <g
         inkscape:label="Camada 1"
         inkscape:groupmode="layer"
         id="layer1"
         transform="translate(0,-147)">
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="M 19.644756,258.3128 5.7658628,268.314 H 22.872807 c 0,0 0.187532,-5.31526 -3.228051,-10.0012 z"
           id="slice1"
              inkscape:connector-curvature="0" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 30.360381,250.47452 c 3.643028,5.17543 5.672817,11.07682 5.788654,17.83948 H 22.872807 c -0.02498,-4.19368 -1.265734,-7.39262 -3.228051,-10.0012 z"
           id="slice2"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 30.360381,250.47452 c 3.93051,5.25051 5.914936,11.17791 5.788654,17.83948 l 14.672077,5e-5 c -0.108784,-10.30942 -3.222437,-19.01623 -8.62063,-26.50463 z"
           id="slice3"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 42.200482,241.80942 12.868196,-9.33398 c 7.319086,10.68915 11.5586,22.50496 11.649384,35.83861 h -15.89695 c 0.103356,-9.76516 -3.083149,-18.50223 -8.62063,-26.50463 z"
           id="slice4"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 67.553783,223.39693 c 10.927514,15.26562 14.581271,30.17929 14.601171,44.91712 H 66.718062 C 66.213011,254.76771 62.27642,242.84683 55.068678,232.47544 Z"
           id="slice5"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 67.553783,223.39693 11.669101,-8.36785 c 10.448122,16.11761 17.818258,33.31006 17.205418,53.29023 l -14.273348,-0.005 c -0.07002,-19.06993 -6.098509,-33.05033 -14.601171,-44.91738 z"
           id="slice6"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 79.222884,215.02908 11.28324,-8.26756 c 13.526926,20.62584 20.756216,41.15226 19.995706,61.55253 l -14.073526,0.005 c 0.0162,-24.12003 -7.84737,-39.53092 -17.20542,-53.28997 z"
           id="slice7"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 90.506124,206.76152 13.923566,-10.12018 c 15.17384,22.91882 23.32568,46.75855 23.28503,71.67271 h -17.21289 c 0.12283,-23.50426 -7.66729,-43.52682 -19.995706,-61.55253 z"
           id="slice8"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 117.66315,186.85027 12.45687,-8.87258 c 19.31434,26.19509 28.236,56.66114 29.34882,90.33631 l -14.34662,0.0516 c 0.55136,-30.09639 -9.81741,-56.90177 -27.45907,-81.51533 z"
           id="slice10"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 104.42969,196.64134 13.23346,-9.79107 c 19.81918,27.69851 27.83209,54.814 27.45907,81.51536 l -17.4075,-0.0516 c 0.31866,-24.26966 -7.63928,-48.15136 -23.28503,-71.67269 z"
           id="slice9"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />

        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="140.74825"
           y="268.02475"
           id="texto9"><tspan
             sodipodi:role="line"
             id="texto99"
             x="140.74825"
             y="268.02475"
             style="font-size:7.05555534px;stroke-width:0.26458332">9</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="123.29855"
           y="268.12485"
           id="texto8"><tspan
             sodipodi:role="line"
             id="textssss8"
             x="123.29855"
             y="268.12485"
             style="font-size:7.05555534px;stroke-width:0.26458332">8</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="106.31586"
           y="268.20859"
           id="texto7"><tspan
             sodipodi:role="line"
             id="dddddd"
             x="106.31586"
             y="268.20859"
             style="font-size:7.05555534px;stroke-width:0.26458332">7</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="92.180901"
           y="268.00748"
           id="text6"><tspan
             sodipodi:role="line"
             id="texto235223526"
             x="92.180901"
             y="268.00748"
             style="font-size:7.05555534px;stroke-width:0.26458332">6</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="77.89962"
           y="268.12991"
           id="texto5"><tspan
             sodipodi:role="line"
             id="tspan23528"
             x="77.89962"
             y="268.12991"
             style="font-size:7.05555534px;stroke-width:0.26458332">5</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="62.054249"
           y="268.04987"
           id="texto4"><tspan
             sodipodi:role="line"
             id="tspan23532"
             x="62.054249"
             y="268.04987"
             style="font-size:7.05555534px;stroke-width:0.26458332">4</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="46.189892"
           y="268.1373"
           id="texto3"><tspan
             sodipodi:role="line"
             id="tspan23536"
             x="46.189892"
             y="268.1373"
             style="font-size:7.05555534px;stroke-width:0.26458332">3</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="31.437782"
           y="268.08063"
           id="texto2"><tspan
             sodipodi:role="line"
             id="tspan23540"
             x="31.437782"
             y="268.08063"
             style="font-size:7.05555534px;stroke-width:0.26458332">2</text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="18.192924"
           y="268.38547"
           id="texto1"><tspan
             sodipodi:role="line"
             id="asasassasassa"
             x="18.192924"
             y="268.38547"
             style="font-size:7.05555534px;stroke-width:0.26458332">1</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="150.51283"
           y="267.90771"
           id="texto10"><tspan
             sodipodi:role="line"
             id="asdasd"
             x="150.51283"
             y="267.90771"
             style="font-size:7.05555534px;stroke-width:0.26458332">10</tspan></text>
        </g>
        </svg>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scripttype="text/javascript">
        $(function(){
            var graus = 36;
            for(var x=1; x<10; x++){
                var clone = $("svg:eq(0)").clone(true, true);
                clone.css({
                    transform: "rotate("+graus+"deg)"
                });
                $("div").append(clone);
                graus += 36;
            }
        });
    </script>
    <script type="text/javascript">
        $("path").click(function(event){
            $("*").toggleClass("desativo");
            $(this).toggleClass("ativo");
        });
    </script>
    </body>
</html>

And the CSS looks like this: 

#slice1 , #slice2, #slice3, #slice4, #slice5, #slice6, #slice7, #slice8, #slice9, #slice10 {

  stroke: black;
}

path {
  fill: white;
  stroke: black;
}

div{
   position: absolute;
   left: 600px;
   top: 600px;
}

svg{
   position: absolute;
   top: 0;
   left: 0;
   transform-origin: 3% 81%;
   clip-path: polygon(3% 81%, 72% 21%, 100% 0%, 100% 0%, 100% 81%);
}

.ativo {
  fill: black !important;
}

.desativo {
    fill: grey;
}

path:hover {
  cursor: pointer;
}
    
asked by anonymous 07.12.2018 / 00:44

1 answer

2

Using .siblings you can change the fill of siblings and the clicked element itself. Just create a click event for the path's: 

$(function(){
   
   var graus = 36;
   for(var x=1; x<10; x++){
      var clone = $("svg:eq(0)").clone(true, true);
      clone.css({
         transform: "rotate("+graus+"deg)"
      });
      $("div").append(clone);
      graus += 36;
   }
   
   $("path").on("click", function(){
      $(this)
      .css("fill", "black")
      .siblings("path")
      .css("fill", "gray")
   });
   
   
});
#slice1 , #slice2, #slice3, #slice4, #slice5, #slice6, #slice7, #slice8, #slice9, #slice10 {
  fill: white;
  stroke: black;
}

#texto1{
  fill:grey;
}

#slice1:hover, #slice2:hover, #slice3:hover, #slice4:hover, #slice5:hover, #slice6:hover, #slice7:hover, #slice8:hover, #slice9:hover, #slice10:hover {
  fill: black;
  stroke: white;
}

div{
   position: relative;
   left: 600px;
}

svg{
   position: absolute;
   top: 0;
   left: 0;
   transform-origin: 3% 81%;
   clip-path: polygon(3% 81%, 72% 21%, 100% 0%, 100% 0%, 100% 81%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div><svgxmlns: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"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="180mm"
   height="150mm"
   viewBox="0 0 180 150"
   version="1.1"
   id="svg9212"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   sodipodi:docname="slicedoslicesliciado.svg">
  <defs
     id="defs9206" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4142136"
     inkscape:cx="355.84436"
     inkscape:cy="202.15073"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:measure-start="135.294,489.325"
     inkscape:measure-end="508.197,760.214"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     showguides="true"
     inkscape:guide-bbox="true">
    <sodipodi:guide
       position="178.66968,28.624566"
       orientation="0,1"
       id="guide23070"
       inkscape:locked="false" />
  </sodipodi:namedview>
  <metadata
     id="metadata9209">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Camada 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-147)">
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 19.644756,258.3128 5.7658628,268.314 H 22.872807 c 0,0 0.187532,-5.31526 -3.228051,-10.0012 z"
       id="slice1"
          inkscape:connector-curvature="0" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 30.360381,250.47452 c 3.643028,5.17543 5.672817,11.07682 5.788654,17.83948 H 22.872807 c -0.02498,-4.19368 -1.265734,-7.39262 -3.228051,-10.0012 z"
       id="slice2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 30.360381,250.47452 c 3.93051,5.25051 5.914936,11.17791 5.788654,17.83948 l 14.672077,5e-5 c -0.108784,-10.30942 -3.222437,-19.01623 -8.62063,-26.50463 z"
       id="slice3"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 42.200482,241.80942 12.868196,-9.33398 c 7.319086,10.68915 11.5586,22.50496 11.649384,35.83861 h -15.89695 c 0.103356,-9.76516 -3.083149,-18.50223 -8.62063,-26.50463 z"
       id="slice4"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 67.553783,223.39693 c 10.927514,15.26562 14.581271,30.17929 14.601171,44.91712 H 66.718062 C 66.213011,254.76771 62.27642,242.84683 55.068678,232.47544 Z"
       id="slice5"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 67.553783,223.39693 11.669101,-8.36785 c 10.448122,16.11761 17.818258,33.31006 17.205418,53.29023 l -14.273348,-0.005 c -0.07002,-19.06993 -6.098509,-33.05033 -14.601171,-44.91738 z"
       id="slice6"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 79.222884,215.02908 11.28324,-8.26756 c 13.526926,20.62584 20.756216,41.15226 19.995706,61.55253 l -14.073526,0.005 c 0.0162,-24.12003 -7.84737,-39.53092 -17.20542,-53.28997 z"
       id="slice7"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 90.506124,206.76152 13.923566,-10.12018 c 15.17384,22.91882 23.32568,46.75855 23.28503,71.67271 h -17.21289 c 0.12283,-23.50426 -7.66729,-43.52682 -19.995706,-61.55253 z"
       id="slice8"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 117.66315,186.85027 12.45687,-8.87258 c 19.31434,26.19509 28.236,56.66114 29.34882,90.33631 l -14.34662,0.0516 c 0.55136,-30.09639 -9.81741,-56.90177 -27.45907,-81.51533 z"
       id="slice10"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 104.42969,196.64134 13.23346,-9.79107 c 19.81918,27.69851 27.83209,54.814 27.45907,81.51536 l -17.4075,-0.0516 c 0.31866,-24.26966 -7.63928,-48.15136 -23.28503,-71.67269 z"
       id="slice9"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />

    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="140.74825"
       y="268.02475"
       id="texto9"><tspan
         sodipodi:role="line"
         id="texto99"
         x="140.74825"
         y="268.02475"
         style="font-size:7.05555534px;stroke-width:0.26458332">9</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="123.29855"
       y="268.12485"
       id="texto8"><tspan
         sodipodi:role="line"
         id="textssss8"
         x="123.29855"
         y="268.12485"
         style="font-size:7.05555534px;stroke-width:0.26458332">8</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="106.31586"
       y="268.20859"
       id="texto7"><tspan
         sodipodi:role="line"
         id="dddddd"
         x="106.31586"
         y="268.20859"
         style="font-size:7.05555534px;stroke-width:0.26458332">7</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="92.180901"
       y="268.00748"
       id="text6"><tspan
         sodipodi:role="line"
         id="texto235223526"
         x="92.180901"
         y="268.00748"
         style="font-size:7.05555534px;stroke-width:0.26458332">6</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="77.89962"
       y="268.12991"
       id="texto5"><tspan
         sodipodi:role="line"
         id="tspan23528"
         x="77.89962"
         y="268.12991"
         style="font-size:7.05555534px;stroke-width:0.26458332">5</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="62.054249"
       y="268.04987"
       id="texto4"><tspan
         sodipodi:role="line"
         id="tspan23532"
         x="62.054249"
         y="268.04987"
         style="font-size:7.05555534px;stroke-width:0.26458332">4</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="46.189892"
       y="268.1373"
       id="texto3"><tspan
         sodipodi:role="line"
         id="tspan23536"
         x="46.189892"
         y="268.1373"
         style="font-size:7.05555534px;stroke-width:0.26458332">3</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="31.437782"
       y="268.08063"
       id="texto2"><tspan
         sodipodi:role="line"
         id="tspan23540"
         x="31.437782"
         y="268.08063"
         style="font-size:7.05555534px;stroke-width:0.26458332">2</text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="18.192924"
       y="268.38547"
       id="texto1"><tspan
         sodipodi:role="line"
         id="asasassasassa"
         x="18.192924"
         y="268.38547"
         style="font-size:7.05555534px;stroke-width:0.26458332">1</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="150.51283"
       y="267.90771"
       id="texto10"><tspan
         sodipodi:role="line"
         id="asdasd"
         x="150.51283"
         y="267.90771"
         style="font-size:7.05555534px;stroke-width:0.26458332">10</tspan></text>
  </g>
</svg>

</div>
    
07.12.2018 / 01:10
How do I display the highest height ever read on the screen? Multiple SQL Query