Well folks, I wanted to know if I could join this shape, which looks like a piece of pizza, to form a circle. The idea would be to clone it, 10 times, and to form the complete circle.
After making them stay in position, I want to update the CSS for the coloring effect to work individually on each.
Edit: I made a few attempts before, using the transform property of css , but I could not get the tips to fit.
You can do with a loop by cloning the first svg and applying transform rotate of 36deg to each new svg inserted, ie the first inserted will have 36deg, the second 72deg, and so on. And for everyone to rotate from the center, I used transform-origin of 3% 81% .
The problem that arises when rotating the element is that part of it (invisible) masks the previous one causing the: hover to be prevented. I was able to resolve this by using the clip-path property (see compatibility table in Can I Use Can I Use ), but Microsoft browsers do not support the property. This property cuts the invisible areas of the svg so that they do not overlap with the others.
Another problem is some id 's that you put into the code. As you can not duplicate id's and as I do not know which pattern these id's did not change that part, but this can be easily fixed in the clones. I suggest changing to classes.
I have also put the svg's inside a parent div so that they all have the same absolute position, doing the rotation.
See how it went (run full screen for better viewing):
$(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;
}
});#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>