svg圆呈正方形

Question

我试图使用svg来制作饼图，所以我找到了这个码页，它有一个动画饼图。

我试着制作饼图20x20，而不是50x50，所以我想我可以改变宽度和高度，然后改变半径和中心点的一半。

我还将css中的笔画宽度更改为20，将圆周改为63 (2 x饼x10)，因此我不确定还需要更改什么才能使正方形变为圆形。

然而，我遇到了一个奇怪的错误，那就是饼块变成了一个正方形：单击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>

​

Answer 1

有几件事：

1. 内圆的半径应为5(而不是10)。
2. CSS中的$circumference应该是内圆(半径为5 )的一个，所以应该是31.4。
3. stroke-width应该是10的侧面(外圈的大小，而不是20)。

以下是解决办法：

https://codepen.io/anon/pen/jLwjdb

请注意，我还在js代码中更改了CIRCUMFERENCE的值，但它只影响您从未调用过的onButtonClickDynamic函数，但它在那里，以防您需要它。

Answer 2

在CSS中，可以将SVG的名称圈在

svg circle{
.....
}

而svg循环html系统是错误的，它应该是：

<circle r="20" cx="30" cy="30" class="circle"></circle>