繁体   English   中英

SVG-绘制空心矩形(矩形甜甜圈)?

[英]svg - draw hollow rectangle(rect donut)?

任何人都可以帮助我在不使用任何js lib(例如Raphael)的情况下用svg绘制空心矩形吗?
从根本上讲,它应与“甜甜圈形状”相同,但应为矩形。
像这样的东西:

在此处输入图片说明

干得好

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM