1
Good people, I was wondering if I could get this shape, which looks like a piece of pizza, to form a circle. The idea would be to clone it 10 times and form the complete circle.
https://codepen.io/giovanemachado/pen/WYqpjO
After I get them into position, I intend to update the CSS for the coloring effect to work individually on each.
Edit: I made a few attempts before using the property transform of css, but I couldn’t make the ends fit.
1
You can do it with a loop for cloning the first svg and applying transform rotate from 36deg to each new svg inserted, ie the first inserted will have 36deg, the second 72deg and so on. And for everyone to turn from the center, I used transform-origin of 3% 81%.
The problem that arises when rotating the element is that part of it (invisible) covers the previous one causing :Hover to be prevented. I was able to solve it using the property clip-path (see compatibility table on Can I Use), but Microsoft browsers do not support the property. This property cuts the invisible areas of the svg so that they are not on top of others.
Another problem are some id'The ones you put in the code. As one can not duplicate id’s and as I do not know what the default of these id’s did not change this part, but this can be easily fixed in the clones. I suggest changing to classes.
I also put the svg’s inside a div-parent so that they all have the same absolute position, doing the rotation.
See how it looked (run in full screen to better view):
$(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>
<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>This is perfect! Thank you very much!!
I ended up asking one more question, if you want to take a look, is sequence of this actually. Hug
Browser other questions tagged jquery css svg
You are not signed in. Login or sign up in order to post.
Face the way you thought it might work, but the correct thing would be to already generate the SVG in the correct format, here for example you can see something very close to what you want. This answer SVG is not legal, but at least it is "one thing" https://answall.com/questions/344197/mouse-hover-n%C3%A3o-runs-nas-c%C3%A9lulas-do-calend%C3%A1rio-circular-em-svg/344210#344210
– hugocsl
With Transform it’s even easy, but a problem arises: a part of the svgs will be on top of each other preventing the :Hover of the ones underneath.
– Sam