The area inside the inner circle does not count as part of the shape, hence interactivity is good. The two components are semi-circular arcs which join to form a circle (in the "d" attribute below, they each end with a 'z'). You can do this as per the SVG spec by using a path with two components and fill-rule="evenodd". Note the downside that there's a single pixel missing at the starting point (at the top), which is only there if you add a stroke on.įound this SO answer (and better yet, this answer) which describes how to get the empty innards in general JSFiddle - Contains several rings and CSS to simulate interactivity. Actually will still work without, but inner ring will have one unit missing in stroke M 0 outerRadius-innerRadius // Move to top point of inner radiusĪ innerRadius, innerRadius, 0, 1, 1, -1, 0 // Draw inner arc, but don't close it Z // default fill-rule:even-odd will help create the empty innards M cx, cy // Move to center of ringĪ outerRadius, outerRadius, 0, 1, 0, 1, 0 // Draw outer arc, but don't close it Very useful when you have many concentric rings, especially if they're interactive (say, with CSS hover commands).įor the draw command. Note that the outer circle actually isn't closed, which is only apparent when you use a stroke. Thanks to Chasbeen, I figured out how to make a true ring/donut in SVG.
0 Comments
Leave a Reply. |