SVG 教程 (二)矩形
SVG <rect>
SVG Shapes
SVG有一些预定义的形状元素,可被开发者使用和操作:
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
下面的章节会为您讲解这些元素,首先从矩形元素开始。
SVG 矩形 - <rect>
实例 1
<rect> 标签可用来创建矩形,以及矩形的变种:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="300" height="100"style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
对于Opera用户: 查看SVG文件(右键单击SVG图形预览源)。
代码解析:
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
实例 2
让我们看看另一个例子,它包含一些新的属性:
Here is the SVG code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="50" y="20" width="150" height="150"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
代码解析:
- x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
- y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
- CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
- CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)
实例 3
定义整个元素的不透明度:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="50" y="20" width="150" height="150"style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
- The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)
实例 4
最后一个例子,创建一个圆角矩形:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="50" y="20" rx="20" ry="20" width="150" height="150"style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
- rx 和 ry 属性可使矩形产生圆角。
原文:http://www.runoob.com/svg/svg-rect.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 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言. 学习之前应具备的基础知识: 继续学习之前,你应该对以下内容有基本的了解: HTML XML 基础 如果希望首先学习这些内容,请在 ...
- ps文字换行_零基础一周内熟悉使用PS基础工具【Photoshop教程二】
零基础一周内熟悉使用PS基础工具[Photoshop教程一]这篇的后台数据显示有很多知友都有收藏了.由此可见现在的视频教程,网络上太多太多但,但好多知识都太"碎片化"今天学习这个技 ...
- (翻译)开始iOS 7中自动布局教程(二)
(翻译)开始iOS 7中自动布局教程(二) 这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行 ...
- 动画骨骼【Visual C++】游戏开发五十二 浅墨DirectX教程二十 骨骼动画来袭(一)...
间时紧张,先记一笔,后续优化与完善. 本系列文章由zhmxy555(毛星云)编写,载转请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/detail ...
- 【Visual C++】游戏开发五十六 浅墨DirectX教程二十三 打造游戏GUI界面(一)
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/poem_qianmo/article/details/16384009 作者:毛星 ...
- 【Visual C++】游戏开发五十二 浅墨DirectX教程二十 骨骼动画来袭(一)
这是答应大家的讲解骨骼动画的文章的N部曲的第二篇.这篇文章里,我们对现行的三种模型动画技术进行了概述,然后对X文件构成进行了详细的剖析,最后放出了骨骼动画的第一个示例程序,载入了<诛仙>中 ...
最新文章
- Android入门(十二)SQLite事务、升级数据库
- android+Unity3D游戏开发之简单的物体运动
- 知识图谱还有哪些方向值得深入研究?这 6 篇最新论文给你答案
- 为什么 HashMap 常用 String 对象作 key
- 编译protobuf-3.11.4 错误: aclocal-1.15: command not found的解决办法
- ospf hello时间和dead_图文并茂解释OSPF邻居关系建立失败的几种常见情况(太实用了!)...
- FragmentStack
- php7 连接mysql插件_php7
- 你的计算机usb管理策略,您的计算机已经实施了USB存储设备管理策略,系统发现你使用了USB存储设备,该设备已被阻止,如有疑问请与...
- 庆祝我的第一个WebGis完成-c#+MapXtreme2004
- 网络协议从入门到底层原理(2)路由、网络常见概念(因特网, ISP, 接口, 上网方式)、公网私网、NAT
- 曼秀雷敦搜索引擎营销方案_搜索引擎营销——被严重低估的互联网营销途径
- B22-SVN在iOS开发的使用中遇到的问题
- 计算机与科学 研究生考试内容,计算机科学与技术考研考哪些科目 备考技巧有哪些...
- 知识图谱构建技术总述
- PHP怎么加入购物车MySQL_php实现简单加入购物车功能
- 网页前端简单计算器制作
- 网络适配器图标不见了,WLAN以太网都不见了
- 4.2 char类型介绍
- discuz防灌水机制
热门文章
- M斐波那契数列(HDU-4549)
- String Problem(HDU-3374)
- 字符三角形(信息学奥赛一本通-T1004)
- 56 FI配置-财务会计-固定资产-资产数据传输-定义历史数据传输的抵销科目
- 换肤的css,换肤功能,css文件中准备三套颜色
- 嵌入式基于Linux电机控制,嵌入式linux下控制电机运动
- torch和tensorflow各版本下载地址,tensorflow与cuda版本对应关系
- 服务器安装三节点RabbitMQ集群(4)
- linux内核那些事之early boot memory-memblock
- GAN全套学习笔记/论文