我正在尝试使用 svg 来制作饼图,所以我发现这个具有动画饼图的代码笔
我正在尝试将饼图制作为 20 x 20 而不是 50 x 50,所以我想我可以只更改宽度和高度,然后更改半径和中心点的一半。
我还将 css 中的笔触宽度更改为 20,将周长更改为 63(2 x 饼图 x 10),因此我不确定还需要更改什么才能使正方形重新变成圆形。
但是,我遇到了一个奇怪的错误,馅饼变成了正方形:单击 100% 按钮。
有没有办法让第二个圆圈再次变成一个圆圈?
我已经包含了以下代码段,但它不允许使用 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">
<svg width="20" height="20" class="svg">
<circle r="10" cx="10" cy="10" class="circle"/>
<circle id="pie" r="10" cx="10" cy="10" class="circle percent-100"/>
</svg>
</div>
几件事:
$circumference
你的CSS应该是一个内圆(其中有5半径),所以它应该是31.4stroke-width
应该是10侧(外侧cirlce的大小,而不是20)这是修复:https :
//codepen.io/anon/pen/jLwjdb
请注意,我还在
CIRCUMFERENCE
您的 js 代码中更改了 的值,但它只会影响onButtonClickDynamic
您从未调用过的函数,但它会在您需要时使用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句