svg - 绘制空心矩形(rect donut)?

时间:2012-09-19 06:16:29

标签: javascript svg

任何人都可以帮助我使用svg绘制空心矩形而不使用任何js lib(例如Raphael)?
基本上,它应该与“甜甜圈形状”相同,但是矩形 像这样的东西:

enter image description here

2 个答案:

答案 0 :(得分:6)

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>

路径在一个方向向外缠绕,另一个向内缠绕,偶数填充规则在中间切断。

答案 1 :(得分:3)

这是example

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