Javascript svg-绘制空心矩形（矩形圆环）？

有人能帮我在不使用js libe.g的情况下用svg绘制空心矩形吗。拉斐尔？ 在基本上，它应该是相同的想法，甜甜圈形状，但矩形。 大概是这样的：

路径在一个方向上向外弯曲，在另一个方向上向内弯曲，而“偶数填充”规则从中间切出

路径在一个方向向外弯曲，另一个方向向内弯曲，奇偶填充规则从中间切出。

以下是一个：

这是一个：

---

检查一下这个提琴，你想在你的应用程序中使用这样的东西吗？@ViralShah，唯一的问题是它不是空心的，只是看起来是。请看这里的答案，并修改为矩形：应该很简单。如果没有Raphael js，它会不会太有挑战性？检查这把小提琴，你想在你的应用程序中使用这样的东西吗？@ViralShah，唯一的问题是它不是空心的，只是看起来是。请看这里的答案，并修改矩形：它应该很简单。如果没有Raphael js，它会不会太有挑战性？太棒了！现在你会怎么做？那太棒了！现在你会如何处理圆圈？

<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>

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