SVG-绘制空心矩形（矩形甜甜圈）？

Question

Can anybody help me with drawing hollow rectangle with svg WITHOUT using any js lib(eg Raphael)? 任何人都可以帮助我在不使用任何js lib（例如Raphael）的情况下用svg绘制空心矩形吗？
In basic, it should be same idea as "donut shape" but rectangle. 从根本上讲，它应与“甜甜圈形状”相同，但应为矩形。
something like this: 像这样的东西：

在此处输入图片说明

Answer 1

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. 路径在一个方向上向外弯曲，在另一个方向上向内弯曲，奇偶填充规则从中间切开。

Answer 2

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>

SVG-绘制空心矩形（矩形甜甜圈）？

问题描述

2 个解决方案

解决方案1
6 2012-09-19 09:16:30

解决方案2
3 已采纳 2012-09-19 12:51:09

SVG-绘制空心矩形（矩形甜甜圈）？

问题描述

2 个解决方案

解决方案1 6 2012-09-19 09:16:30

解决方案2 3 已采纳 2012-09-19 12:51:09

解决方案1
6 2012-09-19 09:16:30

解决方案2
3 已采纳 2012-09-19 12:51:09