Ich versuche, ein svg zu verwenden, um ein Kreisdiagramm zu machen, so fand ich diese codepen, die ein animiertes Kreisdiagramm hatsvg Kreis als Quadrat zeigt
ich das Kreisdiagramm 20 x 20 statt 50 x zu machen versuchen, Also dachte ich, ich könnte nur die Breite und Höhe und dann die Hälfte für den Radius und die Mittelpunkte ändern.
Ich änderte auch die Strichbreite in der CSS auf 20 und den Umfang auf 63 (2 x Kuchen x 10), so dass ich nicht sicher bin, was ich noch ändern muss, um das Quadrat wieder in einen Kreis.
Allerdings bekomme ich einen seltsamen Bug in dem das Pie Stück in ein Quadrat verwandelt: click on the 100% button.
Gibt es diesen zweiten Kreis sowieso wieder zu einem Kreis?
Ich habe das folgende Snippet enthalten, aber es erlaubt nicht für scss, also konnte ich es nicht bekommen, den Stift zu replizieren, aber es demonstriert das Quadratproblem.
body {
/* Appearance */
background-color: #2c333b;
}
a, h5, h3 {
/* Display & Box Model */
margin: 10px 0;
/* Text */
font-family: sans-serif;
font-weight: normal;
letter-spacing: 1px;
/* Appearance */
color: #fff;
}
.svg {
/* Appearance */
transform: rotate(-90deg);
}
.circle {
/* Appearance */
fill: #fdded9;
}
#pie {
/* Appearance */
stroke: #ff4081;
stroke-dasharray: 0 63;
stroke-width: 20;
transition: stroke-dasharray .2s linear;
}
#pie.percent-10 {
stroke-dasharray: 6.3 63;
}
#pie.percent-20 {
stroke-dasharray: 12.6 63;
}
#pie.percent-30 {
stroke-dasharray: 18.9 63;
}
#pie.percent-40 {
stroke-dasharray: 25.2 63;
}
#pie.percent-50 {
stroke-dasharray: 31.5 63;
}
#pie.percent-60 {
stroke-dasharray: 37.8 63;
}
#pie.percent-70 {
stroke-dasharray: 44.1 63;
}
#pie.percent-80 {
stroke-dasharray: 50.4 63;
}
#pie.percent-90 {
stroke-dasharray: 56.7 63;
}
#pie.percent-100 {
stroke-dasharray: 63 63;
}
.wrapper {
/* Positioning */
position: absolute;
top: 50%;
left: 50%;
/* Display & Box Model */
width: 100px;
/* Appearance */
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
\t <svg width="20" height="20" class="svg">
\t \t <circle r="10" cx="10" cy="10" class="circle"/>
\t \t <circle id="pie" r="10" cx="10" cy="10" class="circle percent-100"/>
\t </svg>
</div>
es ist über Größe und coordonates: '' zeigt die Kreise , nicht nur ein Teil davon;) –