CODEWITHSUNDEEP
csssvg
Pete
Pete

Reputation: 58422

svg circle showing as square

I am trying to use an svg to make a pie chart so I found this codepen that has an animated pie chart

I am trying to make that pie chart 20 x 20 instead of 50 x 50 so I thought I could just change the width and height and then half that for the radius, and center points.

I also changed the stroke width in the css to 20 and the circumference to 63 (2 x pie x 10) so I am not sure what else I need to change to make the square back into a circle.

However, I get a weird bug in that the pie piece turns into a square: click on the 100% button.

Is there anyway to make that second circle into a circle again?

I have included the following snippet but it doesn't allow for scss so I could not get it to replicate the pen, but it demonstrates the square issue.

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>

Upvotes: 0

Views: 3376

Answers (2)

GURU KT
GURU KT

Reputation: 1

In CSS you can circle name of the SVG in

svg circle{
.....
}

and svg circle html sytax is wrong,it should be:

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

Upvotes: 0

Dekel
Dekel

Reputation: 62536

Several things:

  1. The inner circle should have radius of 5 (not 10)
  2. The $circumference in your CSS should be the one for the inner circle (which has radius of 5,) so it should be 31.4
  3. The stroke-width should be the side of the 10 (size of the outer cirlce, and not 20)

Here is the fix:
https://codepen.io/anon/pen/jLwjdb

Note that I also changed the value of the CIRCUMFERENCE in your js code, but it only affect the onButtonClickDynamic function which you never call, but it's there in case you will need it.

Upvotes: 2

Related Questions