您的位置:首页 > 其它

SVG绘制圆形简单示例分享

2016-02-23 00:00 218 查看
今天分享“svg绘制圆形”部分
1、简单圆形
效果图如下:



关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="40" cy="40" r="40"></circle></svg>

代码解析:
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0);
r属性定义圆的半径

2、圆形填充颜色及边框
效果图如下:



关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="45" cy="45" r="40" stroke-width="3" stroke="blue" fill="red"></circle></svg>


代码解析:
fill 属性定义圆形的填充颜色(rgb 值、颜色名或者十六进制值);
stroke-width 属性定义圆形边框的宽度;
stroke 属性定义圆形边框的颜色

好了今天的分享这里结束,我也是一边学习一边分享的,若有错误的地方请大家指正,下次分享“svg绘制椭圆”部分,希望大家届时来浏览,谢谢大家。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  svg