svg - draw hollow rectangle(rect donut)?

Question

Can anybody help me with drawing hollow rectangle with svg WITHOUT using any js lib(e.g. Raphael)?
In basic, it should be same idea as "donut shape" but rectangle.
something like this:

enter image description here

http://jsfiddle.net/kju3Q/5/ check this fiddle, do you want something like this for your application ? — Viral Shah, Sep 19 '12 at 06:21
@ViralShah, The only problem with that is that it's not hollow, it just appears to be. — Korvin Szanto, Sep 19 '12 at 06:23
See the answer here, and modify for rectangle: http://stackoverflow.com/questions/7972347/raphael-js-converting-pie-graph-to-donut-graph/7975226#7975226 It should be easy. — tomsseisums, Sep 19 '12 at 06:29

score 8 · Answer 1 · edited Dec 22 '15 at 17:23

8

Here you go

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2624 1462" width="1312" height="736" id="svg2">

  <path d="M 80,112 l 528,0 0,528 -528,0 z m -64,-64.000003 656,0 0,656.000023 -656,0 z" fill="gold" stroke="black" fill-rule="evenodd" />

</svg>

The path winds in one direction outside and the other inside and the evenodd fill-rule cuts out the middle.

edited Dec 22 '15 at 17:23

jedierikb

12,752
22
95
166

answered Sep 19 '12 at 09:16

Robert Longson

118,664
26
252
242

That's brilliant! Now.. how would you do that with circles? – tbm Jul 15 '15 at 14:08

score 4 · Accepted Answer · answered Sep 19 '12 at 12:51

4

Here's an example:

<svg viewBox="0 0 400 400" shape-rendering="crispEdges">
    <path d="M10,10h100v100h-100zM20,20v80h80v-80z" fill="yellow" stroke="black"/>
</svg>

answered Sep 19 '12 at 12:51

Erik Dahlström

59,452
12
120
139

svg - draw hollow rectangle(rect donut)?

2 Answers2