首页 > 上网技巧 > 电脑小技巧 > 正文

SVG基本图形之矩形效果rect应用教程

时间:2014-07-21 09:36 作者:QQ地带 我要评论

要使用 SVG 来產生一个矩形是一件很简单的事,只要使用 <rect> 标籤就可以囉。
 
先来看个基本的矩形写法:
 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="200" height="100" />
</svg>
rect 的就先当它是 div 吧,预览后的效果就是
 
 

 
 
当然也能利用 css 或是 style 属性来进行各种样式设定:
 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="10" width="100" height="100" style="fill:steelblue;stroke:red;stroke-width:10;" />
 
<rect x="130" y="10" width="100" height="100" style="fill:steelblue;stroke:red;stroke-width:10;fill-opacity:.5;" />
 
<rect x="250" y="10" width="100" height="100" style="fill:steelblue;stroke:red;stroke-width:10;opacity:.5;" />
</svg>
在 SVG 中,座标都是绝对座标,所以只要直接使用 x 及 y 属性就能自订位置了。接著样式的部份,也能像是 css 一样来自订背景顏色或是边框顏色:
 
 
笔者将 rect 的属性整理成一个简单的表格:
 
rect 属性
属性名称 属性说明
x 起始点 x 轴的座标
y 起始点 y 轴的座标
width 矩形的宽度
height 矩形的高度
rx 圆角的 x 轴半径,类似 css 中的 border-radius
ry 圆角的 y 轴半径,类似 css 中的 border-radius
transform 矩形的变形效果,类似 css 中的 transform
而 style 的部份可以参考以下的表格:
 
stlye 属性
属性名称 属性说明
fill 图形内部的填满顏色,类似 css 中的 background-color
fill-opacity 图形内部的不透明度值,类似 css 中的 opacity,但不包含边框喔!
stroke 图形的边框顏色,类似 css 中的 border-color
stroke-width 图形的边框宽度,类似 css 中的 border-width
opacity 图形的不透明度值,类似 css 中的 opacity
其中要仔细比较 opacoty 跟 fill-opacity 的差异喔!

标签: svg
顶一下
(3)
100%
踩一下
(0)
0%

Google提供的广告