SVG画菱形

SVG有已定义的矩形，圆形，椭圆形，但是怎么没有菱形咧？

让姐来教你画高端大气上档次的菱形吧！

可以用多边形来改造，代码如下：

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="100,100 175,50 250,100 175,150"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>

points指明菱形的四个顶点，依次是左，上，右，下。

设置上图左顶点为（0,30），那么上顶点为（40,0），右顶点为（80,30），下顶点为（40,60）；