Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
msdsmd sm,dfsadf
1,124 PointsHow to fix SVG circles on top of each other
Please, someone, help with aligning more than one circles inside SVG tag. These are very simple to read.
<html>
<body>
<svg height="100" width="100" fill="none">
<style>
circle{
stroke-width:100px;
}
svg{
border-radius:50%; background:;
}
</style>
<circle cx="50%" cy="50%" r="47" stroke="blue" stroke-dasharray="30 295.16" />
<circle cx="50%" cy="50%" r="47" stroke="green" stroke-dasharray="50 295.16" / stroke-dashoffset="30"/>
<circle cx="50%" cy="50%" r="47" stroke="purple" stroke-dashoffset="-50" stroke-dasharray="200 295.16"/>
</svg>
<script>
</script>
</body>
</html>
I want to align the circles next to each other , but I do not know the proper to do that.
5 Answers
Rich Donnellan
Treehouse Moderator 27,696 PointsI'm not entirely sure what you're asking for but maybe something like this? The trick to aligning them next to each other is by incrementing the cx value by 2 times the radius. I've simplified things even more than your example.
<svg width="600" height="200">
<circle cx="100" cy="100" r="100" fill="blue" />
<circle cx="300" cy="100" r="100" fill="green" />
<circle cx="500" cy="100" r="100" fill="purple" />
</svg>
msdsmd sm,dfsadf
1,124 PointsI want to make a pie chart with pure SVG
Reggie Williams
Treehouse TeacherHey msdsmd sm,dfsadf your circles all have the same values for the cx & cy properties. Thesse properties determine the horizontal and vertical center of your circles and since they are the same the circles are stacked on top of eachother. Try decreasing the radius (r) and adjusting the center values
Reggie Williams
Treehouse Teachermsdsmd sm,dfsadf You'll have to do some transforming and adjust the stroke-dasharray . Here's a great tutorial on making an svg pie chart https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart
msdsmd sm,dfsadf
1,124 Points<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<svg viewBox="0 0 100 100" height="100" style="border-radius:50%;" width="100" fill="black">
<style>
svg{background:black;}
circle{stroke-width:100px;fill:none;}
</style>
<circle stroke="red" cx="50%" cy="50%" r="50%" stroke-dashoffset="0" stroke-dasharray="60 314.159265359"></circle>
<circle stroke="yellow" cx="50%" cy="50%" r="50%" stroke-dashoffset="-60" stroke-dasharray="60 314.159265359"/>
<circle stroke="blue" cx="50%" cy="50%" r="50%" stroke-dashoffset="-120" stroke-dasharray="60 314.159265359"/>
<circle stroke="green" cx="50%" cy="50%" r="50%" stroke-dashoffset="-120" stroke-dasharray="60 314.159265359"/>
<circle stroke="orange" cx="50%" cy="50%" r="50%" stroke-dashoffset="-180" stroke-dasharray="60 314.159265359"/>
<circle stroke="purple" cx="50%" cy="50%" r="50%" stroke-dashoffset="-240" stroke-dasharray="60 314.159265359"/>
<circle stroke="grey" cx="50%" cy="50%" r="50%" stroke-dashoffset="-280" stroke-dasharray="60 314.159265359"/>
</svg>
</body>
</html>
/* These work great, but I just put a random number to stroke-dash offset to see what will happen. I am not entirely sure if this the right way to do it. Is there any precise way to know how much stroke-dash offset I need to apply to an individual circle?
Please help!
*/
Reggie Williams
Treehouse Teachermsdsmd sm,dfsadf The stroke-dashoffset property defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the further along the path the dashes will begin. It takes a value of either user units or percentages https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset
msdsmd sm,dfsadf
1,124 Pointsmsdsmd sm,dfsadf
1,124 PointsI have done reading MDN article, but none of them describe how to fix circles on top of each other.