SVG绘制圆形简单示例分享
2016-02-23 00:00
218 查看
今天分享“svg绘制圆形”部分
1、简单圆形
效果图如下:
关键代码:
代码解析:
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0);
r属性定义圆的半径
2、圆形填充颜色及边框
效果图如下:
关键代码:
代码解析:
fill 属性定义圆形的填充颜色(rgb 值、颜色名或者十六进制值);
stroke-width 属性定义圆形边框的宽度;
stroke 属性定义圆形边框的颜色
好了今天的分享这里结束,我也是一边学习一边分享的,若有错误的地方请大家指正,下次分享“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绘制椭圆”部分,希望大家届时来浏览,谢谢大家。
相关文章推荐
- JavaScript 判断浏览器是否支持SVG的代码
- 基于jquery和svg实现超炫酷的动画特效
- 推荐10 款 SVG 动画的 JavaScript 库
- 用svg制作富有动态的tooltip
- java生成饼图svg及JFreeChart生成svg图表
- Python实现批量把SVG格式转成png、pdf格式的代码分享
- Canvas和SVG的区别
- Web开发中的矢量绘图(vml,svg)处理和应用
- SVG 图像入门教程
- ExtJS之Chart导出为png/jpeg,解决中文乱码
- Convert SVG to PDF
- Convert SVG to PDF by using iText in Java(ZT)
- Vector graphics in iText PDF
- GML、SVG、VML的比较
- 路径:path和shape深入了解
- 奇虎360-数据可视化
- SVG绘制矩形简单示例分享
- D3-SVG 画布完整的柱形图
- cairo绘图png,pdf,svg
- SVG(Scalable Vector Graphics)