(4)SVG中所用到的形状简介------矩形
来源:互联网 发布:java编程入门 pdf 编辑:程序博客网 时间:2024/05/18 00:24
SVG 形状
SVG 有一些预定义的形状元素,可被开发者使用和操作:
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
<rect> 标签
<rect> 标签可用来创建矩形,以及矩形的变种。
要理解它的工作原理,请把这些代码拷贝到记事本,然后保存为 "rect1.svg" 文件。把此文件放入web目录中:<rect> 标签可用来创建矩形,以及矩形的变种。
要理解它的工作原理,请把这些代码拷贝到记事本,然后保存为 "rect1.svg" 文件。把此文件放入web目录:
会得到如下效果图:
代码解释:
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
让我们看一下另一个包含新属性的例子:
如下图:
例子解释:
- x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
- y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
- CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
- CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)
为整个元素定义透明度:
效果图如下:
代码解释:
CSS 的 opacity 属性定义整个元素的透明值(合法的范围是:0 - 1)
最后的例子,创建带有圆角的矩形:
效果图如下:
代码解释:
rx 和 ry 属性可使矩形产生圆角。
- (4)SVG中所用到的形状简介------矩形
- (5)SVG中所用到的形状简介------圆形
- (6)SVG中所用到的形状简介------椭圆
- (7)SVG中所用到的形状简介------线条
- (10)SVG中所用到的形状简介------定义路径
- (9)SVG中所用到的形状简介------仅包含直线的形状
- (8)SVG中所用到的形状简介------不少于三个边的图形
- SVG 形状_矩形
- jstl简介及自己项目中所用到的jstl
- 什么是SVG和SVG常用的形状
- 什么是SVG和SVG常用的形状
- 什么是SVG和SVG常用的形状
- 项目中所用到的一些xx
- HTTP RFC中所用到的规则
- java 中所用到的集合
- Spring中所用到的设计模式
- SVG中常用基本形状教程
- SVG中常用基本形状教程
- orcad 小问题两个(annotate 标号重复和显示GND的方法)
- Liferay配置文件Tag标签参考
- POJ 2823
- 闲着没事测了一下memcpy
- liferay Portal对象
- (4)SVG中所用到的形状简介------矩形
- 大三实习的迷茫。。
- IBM i 抓住Mono的时机--再次
- Proxool连接池 配置
- Liferay研究之廿三:JSP中可直接引用的Liferay对象
- Liferay研究之十五:Liferay如何对外提供Service,以及如何调用
- iphone table 实现动态加载图片
- JavaLiferay研究之十六:FCKeditor如何插入服务器上的资源?
- Liferay研究之十二:对Liferay框架的几点分析总结 收藏