SVG 形状写法示例

前端GoGoGo

发布于 2018-08-24 16:19:12

9650

发布于 2018-08-24 16:19:12

<line x1="10" x2="50" y1="110" y2="150"/>

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

在座标为 (10,20) 的地方画一个宽 30，高 15 的矩形。

<svg>
  <rect x="10" y="20" width="30" height="15"/>
</svg>

背景色红色的矩形。

<svg>
  <rect width="30" height="15" fill="#f00"/>
</svg>

带边框的矩形。

<svg>
  <rect width="30" height="15" stroke="#f00" stroke-width="2"/>
</svg>

圆角矩形。

<svg>
  <rect width="30" height="15" rx="5" ry="10"/>
</svg>

<polygon points="10 10, 10 15, 20 30, 40 50"/>

<circle cx="80" cy="50" r="20"/>

(cx, cy) 是圆心座标

<ellipse cx="75" cy="75" rx="20" ry="5"/>

(cx, cy) 是椭圆中心座标 cx 为长轴半径 cy 为短轴半径

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016.12.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度