0
我試圖使用SVG做一個餅圖，所以我發現這個codepen有一個動畫餅圖SVG圈
我想50×使這個餅圖20×20，而不是50，所以我想我可以改變寬度和高度，然後改變半徑和中心點的一半。
我還將css中的筆畫寬度更改爲20，將圓周更改爲63（2 x pie x 10），因此我不確定還需要更改哪個方塊才能使方塊變成圓圈。
但是，我得到一個奇怪的錯誤，在餡餅片變成一個正方形：click on the 100% button。
有沒有辦法讓第二個圓圈再次變成圓形？
我已經包含了下面的代碼片段，但它不允許scss，所以我無法讓它複製筆，但它證明了方形問題。
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>
它是關於尺寸和coordonates：' \t \t <圓R = 「20」 CX = 「30」 CY =「30 「class =」circle「/> \t \t