SVG画矩形、半圆、三角形
2015-10-29 16:40
295 查看
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="841.89px" height="595.275px" viewBox="0 0 841.89 595.275" enable-background="new 0 0 841.89 595.275" xml:space="preserve"> <rect name="区域" x="97.096" y="49.827" fill="none" stroke="#FFFFFF" stroke-width="3.0821" width="656" height="493.141"/> <circle name="中圈" fill="none" stroke="#FFFFFF" stroke-width="3.0821" cx="425.127" cy="296.913" r="50.683"/> <circle name="开球点" fill="#FFFFFF" cx="425.126" cy="296.913" r="4.109"/> <path name="禁区弧线1" fill="#FFFFFF" stroke="#0FFFFF" stroke-width="3.0821" d="M188.312,257.923c11.29,9.231,18.496,23.27,18.496,38.99 c0,15.718-7.203,29.753-18.488,38.982"/> <rect name="禁区1" fill="none" x="96.879" y="186.983" stroke="#FFFFFF" stroke-width="3.0821" width="91.438" height="220.885"/> <rect name="球门区1" fill="none" x="96.879" y="246.569" stroke="#FFFFFF" stroke-width="3.0821" width="30.822" height="99.657"/> <rect name="球门1" fill="#FFFFFF" x="80.442" y="276.365" stroke="#0FFFFF" stroke-width="3.0821" width="16.437" height="40.066"/> <circle name="点球点1" fill="#FFFFFF" cx="156.467" cy="296.913" r="4.11"/> <path name="角球1" fill="none" stroke="#FFFFFF" stroke-width="3.0821" d="M114.858,50.58 c0,9.93-8.051,17.981-17.981,17.981"/> <path name="角球2" fill="none" stroke="#FFFFFF" stroke-width="3.0821" d="M96.879,525.502 c9.93,0,17.979,8.052,17.979,17.981"/> <path name="角球3" fill="none" stroke="#FFFFFF" stroke-width="3.0821" d="M735.59,543.483 c0-9.93,8.049-17.981,17.981-17.981"/> <path name="三角形" fill="red" stroke="blue" d="M150 50 L130 130 L170 130 Z"/> <rect name="矩形" fill="#FFFFFF" x="255" y="125" stroke="#0FFFFF" stroke-width="3.0821" width="16.437" height="45"/> <path d="M275,175 h-100 a100,100 0 1,0 100,-100 z" fill="red" stroke="blue" stroke-width="5"/> <path d="M130 25 A 30 30 0 0 1 55 25" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> <path name="三角形" fill="red" stroke="blue" d="M550 250 L570 325 L530 325 Z"/> <rect name="矩形" fill="#FFFFFF" x="580" y="250" stroke="#0FFFFF" stroke-width="3" width="16" height="75"/> <path d="M630 325 A 50 50 0 0 1 530 325" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> </svg>
下面这句话就是画半圆的
<path d="M630 325 A 50 50 0 0 1 530 325" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
M630 325表示将点移动到此处;
A 表示画笔从当前的点绘制一段圆弧到点(x,y)
50 50是两个半轴长度
0 0 1表示控制旋转角度,等。详见博客http://blog.csdn.net/dusea/article/details/49492167
530 325表示终点坐标。
这里画个半圆,因此终点的y值一致。
注意控制50 50是两个半轴长度,如果超过了起点和终点之间的长度,就会画成一段弧形。
相关文章推荐
- Android之SimpleAdapter
- 利用jquery的jsonp实现的必应搜索
- C++类设计者的核查表
- Windows常见软件故障及解决方案
- C#实现图片文件到数据流再到图片文件的转换 --转
- Android: 在 TextView 里使用删除线
- SSH集成实践一:配置
- servelt远程文件下载
- 转载和积累系列 - 八大排序算法
- Android中实现两次点击返回键退出本程序
- RabbitMq中的交换机
- 标签+线程休眠 = 打地鼠
- Java读取Excel数据
- 生产环境 centos6 源码编辑安装lnmp
- JAVA内部类
- unix学习
- 地名地址编码工具
- 学习windows驱动(PNP和电源模型)
- jdk之多线程Future框架解析
- oracle中rollback的使用