Keep clicking part of an SVG using CSS

Navigation
2

I would like the following: Click on one of the segments, and it will get painted. My idea was to use only CSS, so I wanted to know if there is anything like hover to do this for me. My SVG is as follows: 

<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>

And the CSS looks like this: 

#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;
}

In case, when you pass the mouse on the segment it paints black, when it draws, it turns white. What I want is to click the segment and it changes color, and only change again if I click again.

I'm testing in codepen, here the link

    
asked by anonymous 05.12.2018 / 19:35

1 answer

1

As I mentioned in the comment, if you have an HTML element outside of SVG, you can use it to enable the color of path within SVG. But by right clicking on path I believe I have no way, except for JS

Here's the example, in it when the status of checkbox is as :checked it changes the color of path : 

path {
  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;
}


	.teste {
		background-color: red;
		height: 100px;
		width: 100px;
	}
	.ativo {
		fill: red !important;
		
	}
	input:checked + label + svg > g > #slice9{
		fill: red !important;
	}
<input id="btn4" type="checkbox"> <label for="btn4">Legenta pro #slice9</label>
<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">




  <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>

Option with jQuery

When you click on a path it will make a toggleClass adding and removing the .ativo class that has fill:red . 

$("path").click(function(event){
  $(this).toggleClass("ativo");
});
path {
  fill: white;
  stroke: black;
}
path:hover {
  cursor: pointer;
}

#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;
}

.ativo {
  fill: red !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><div>Cliquenasáreasdosvg</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">

  <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>
    
05.12.2018 / 20:26
I can not do dependency injection [duplicate] Android - take the back-stack splash screen