SVG 教程 (三)圆形,椭圆,直线
SVG <circle>
SVG 圆形 - <circle>
<circle> 标签可用来创建一个圆:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/>
</svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
代码解析:
- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)
- r属性定义圆的半径
SVG <ellipse>
SVG 椭圆 - <ellipse>
实例 1
<ellipse> 元素是用来创建一个椭圆:
椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><ellipse cx="300" cy="80" rx="100" ry="50"style="fill:yellow;stroke:purple;stroke-width:2"/> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
代码解析:
- CX属性定义的椭圆中心的x坐标
- CY属性定义的椭圆中心的y坐标
- RX属性定义的水平半径
- RY属性定义的垂直半径
实例 2
下面的例子创建了三个累叠而上的椭圆:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/><ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/><ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
实例 3
下面的例子组合了两个椭圆(一个黄的和一个白的):
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/><ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
SVG <line>
SVG 直线 - <line>
<line> 元素是用来创建一个直线:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><line x1="0" y1="0" x2="200" y2="200"style="stroke:rgb(255,0,0);stroke-width:2"/> </svg>
对于Opera用户:查看SVG文件右键单击SVG图形预览源)。
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
原文: http://www.runoob.com/svg/svg-line.html
转自:SVG 教程 (三)圆形,椭圆,直线
SVG 教程 (三)圆形,椭圆,直线相关推荐
- SVG 教程 (七)SVG 实例,SVG 参考手册
SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中. 谷歌Chrome,火狐,Internet Explorer9,和Safari都支持. 注意:下面的例子将不会在Opera运行 ...
- SVG 教程 (六)SVG 阴影,SVG 渐变 - 线性,SVG 渐变- 放射性
SVG 阴影 注意: Internet Explorer和Safari不支持SVG滤镜! <defs> 和 <filter> 所有互联网的SVG滤镜定义在<defs> ...
- SVG 教程 (四)多边形,曲线,路径
SVG <polygon> SVG 多边形 - <polygon> 实例 1 <polygon> 标签用来创建含有不少于三个边的图形. 多边形是由直线组成,其形状是 ...
- SVG 教程 (二)矩形
SVG <rect> SVG Shapes SVG有一些预定义的形状元素,可被开发者使用和操作: 矩形 <rect> 圆形 <circle> 椭圆 <elli ...
- ROS SMACH示例教程(三)
ROS SMACH示例教程(三) 本用例将探索SMACH的可用性和学习曲线.这个用例从简单地使用SMACH API开始,最后是一个与其他ROS系统接口的具体示例:一名可行性脚本将在turtlesim中 ...
- Quartz教程三:Job与JobDetail介绍
Quartz教程三:Job与JobDetail介绍 原文链接 | 译文链接 | 翻译:nkcoder | 校对: 本系列教程由quartz-2.2.x官方文档翻译.整理而来,希望给同样对quartz感 ...
- jQuery 3教程(三):jQuery集合
原文地址:jQuery 3教程(三):jQuery集合 Introduction jQuery选择器选择出来的结果很多时候是一个DOM元素集而非单个元素,jQuery可以灵活的访问和修改DOM元素集, ...
- Swift中文教程(三)--流程控制
Swift中文教程(三)--流程控制 原文:Swift中文教程(三)--流程控制 Swift用if和switch编写条件控制语句,用for-in,for,while和do-while编写循环.条件控制 ...
- qpython3可视图形界面_PySide——Python图形化界面入门教程(三)
PySide--Python图形化界面入门教程(三) --使用内建新号和槽 --Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...
最新文章
- 【转载】一文彻底拿下Java异常
- iphone备忘录突然没了_iphone备忘录突然没了?丢失的备忘录内容怎么找回?
- golang panic的错误回收和简单的使用场景
- 【Leetcode | 9】217. 存在重复元素
- ik分词和jieba分词哪个好_Python 中文 文本分析 实战:jieba分词+自定义词典补充+停用词词库补充+词频统计...
- CentrOS7静默安装oracle11g
- UBC、谷歌联合Hinton等提出3D点云的无监督胶囊网络,多任务上实现SOTA
- Simpy学习:基本运行与终止(一)
- windows vs编译环境 python_Python虚拟环境使用(Windows)
- 纯VB代码取得硬盘的物理序列号
- zip和rar文件的contentType
- 黑客帝国「缸中之脑」真的可以,这100万个「活体人脑细胞」5分钟学会打游戏...
- RK3399 Thermal (温度控制)
- 游戏的分类及相关热点
- Visual Studio 2019配置OpenGL环境
- 一文了解上拉电阻和下拉电阻(一)
- 苹果手机怎样录屏 如何录制手机内容
- 解决mysql 服务无法启动问题:Can't find messagefile 'D:\	ools\mysql-5.6.25-winx64\share\errmsg.sys'...
- 最完整的磁性材料行业现状及发展前景分析,长文预警
- 从 电影《飞驰人生》中想到
热门文章
- 医院设置(信息学奥赛一本通-T1338)
- 与7无关的数(信息学奥赛一本通-T1094)
- python出现的意义_[转]Python中下划线以及命名空间的意义
- seafile安装教程 Linux,CentOS7安装seafile开源版
- 15拆分成3个不同的自然数_一个简单的算法 - 将一个正整数拆分成指定几个正整数的组合...
- Kubesphere V2.1.1安装后开启可拔插组件DevOps(2)
- 笨方法“学习python笔记之字典
- Ubuntu系统常用命令
- Softmax和softmax loss的理解
- link标签引入.css文件(目的):适配不同屏幕