<rect> 标签

<rect> 标签可用来创建矩形,以及矩形的变种。

要理解它的工作原理,请把这些代码拷贝到记事本,然后保存为 "rect1.svg" 文件。把此文件放入web目录中:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/> </svg>

代码解释:

  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/> </svg>

例子解释:

  • x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
  • y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
  • CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/> </svg>

CSS 的 opacity 属性定义整个元素的透明值(合法的范围是:0 - 1)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/> </svg>

代码解释:

rx 和 ry 属性可使矩形产生圆角。

svg学习(三)rect的更多相关文章

  1. SVG 学习<三>渐变

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  2. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  4. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  5. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG 学习<一>基础图形及线段

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. SVG学习笔录(一)

    SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验. HTML体系中,最 ...

  10. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

随机推荐

  1. ORA-01034错误:ORALCE NOT CONNECT

    解决办法: 启动数据库 sqlplus '/as sysdba '  startup;

  2. BZOJ 1008 题解

    1008: [HNOI2008]越狱 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 7845  Solved: 3359[Submit][Status] ...

  3. CF 22B. Bargaining Table

    水题.好久没有写过优化搜索题了. #include <cstdio> #include <cstring> #include <iostream> #include ...

  4. iOS模拟器多个虚拟机怎么处理

    1:关闭Xcode和模拟器 2:$sudo killall -9 com.apple.CoreSimulator.CoreSimulatorService 等待输入密码 3:$rm -f ~/Libr ...

  5. Java 仿迅雷多线程下载

    package net.webjoy.jackluo.android_json; /** * 1.http Range "bytes="+ start+end * 2.Random ...

  6. C#关于控件的上下左右移动

    C#怎么让控件上下左右移动?(转) http://wenwen.sogou.com/z/q231436494.htm 在winform中捕获上下左右键等控制键的按键事件(转) http://blog. ...

  7. border-radius 圆角半径

    CSS3属性之一:border-radius 语法: border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 相关属 ...

  8. Hibernate的第一次测试解析

    解析:此题目考查的是对Hibernate中交叉连接的理解.HQL支持SQL风格的交叉连接查询,交叉连接适用于两个类之间没有定义任何关联时.在where字句中,通过属性作为筛选条件,如统计报表数据.使用 ...

  9. CentOS默认开放的本地端口范围

    系统本地开放端口的范围:(默认30000多到60000多) [root@linux2 ~]# vim /etc/sysctl.conf net.ipv4.ip_local_port_range = 1 ...

  10. Ansible (一)

    epel rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm yum -y ins ...