最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分

1、简单矩形

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"></rect>
</svg>

代码解析:

rect 代表矩形;

rect 元素的 width 和 height 属性可定义矩形的高度和宽度;

2、矩形填充颜色及边框

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" <span style="font-family: Arial, Helvetica, sans-serif;">style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);"</span><span style="font-family: Arial, Helvetica, sans-serif;">></rect> </span>
</svg>

代码解析:

CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值);

CSS 的 stroke-width 属性定义矩形边框的宽度;

CSS 的 stroke 属性定义矩形边框的颜色

3、矩形透明度

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;"></rect>
</svg>

代码解析:

CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1);

CSS 的 stroke-opacity 属性定义边框颜色的透明度(合法的范围是:0 - 1);

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

4、矩形位置

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;" x="0" y="20"></rect>
</svg>

代码解析:

x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到左侧的距离是 0px);

y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到顶端的距离是 0px)

5、圆角矩形

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;" x="0" y="20" rx="20" ry="20"></rect>
</svg>

代码解析:

rx 和 ry 属性可使矩形产生圆角(和css3圆角属性类似)

好了今天的分享这里结束,我也是一边学习一边分享的,若有错误的地方请大家指正,下次分享“svg之圆形”部分,希望大家届时来浏览,谢谢大家。

SVG绘制矩形简单示例分享的更多相关文章

  1. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  2. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  3. PHP 使用memcached简单示例分享

    1.添加扩展包 代码如下: php_memcache.dll 2.在PHP.INI添加  代码如下: extension=php_memcache.dll 3.程序 代码如下: < ?php / ...

  4. ABAP分享一 弹出框函数的简单示例

    在开发中经常会使用到弹出框这个功能,在SAP中有很多函数可以实现类似的功能,这里介绍一个比较简单常用的函数  POPUP_TO_CONFIRM 下面是一个实现的简单示例: TABLES sscrfie ...

  5. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  6. opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

    前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...

  7. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  8. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  9. 划词标注1——使用svg绘制换行文本并自动识别库中字典数据

    业务需求 给出一段文本,自动识别出文本中包含的关键字信息,关键字是库里已知的数据,根据类型的不同显示出不同的颜色 业务分析 1)采用css:文本识别出来后,根据识别出的文本更改对应文本的dom,通过更 ...

随机推荐

  1. 单片微机原理P2:80C51外部中断与定时器系统

    0. 外部中断 书上的废话当然是很多的了,对于中断我想大家应该早就有一个很直观的认识,就是"设置断点,执行外部外码,然后返回断点"这样的三个过程.中断给系统提供了一个良好的响应模式 ...

  2. android开源项目学习

    FBReaderJ FBReaderJ用于Android平台的电子书阅读器,它支持多种电子书籍格式包括:oeb.ePub和fb2.此外还支持直接读取zip.tar和gzip等压缩文档. 项目地址:ht ...

  3. WinForm简单多国语言实现

    参考:http://minmin86121.blog.163.com/blog/static/4968115720119259151898/ http://www.cnblogs.com/hakuci ...

  4. CAS认证(1):流程详解

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  5. SQL中使用WITH AS提高性能(二)

    继上一节 对比两条查询,第一是用了with as 第二条语句没用with as 查看执行计划的效果 WITH vep AS ( SELECT package.OrderCode , RANK() OV ...

  6. 二叉树可视化--Graphviz

    大家平时写C程序有没有种把内存里的数据结构全给画出来的冲动呢?数据量小的话,画起来还蛮简单,用viso,我前面的文章都用viso画的.之前写红黑树代码的时候,用的是命令行把整个树打印出来,不过只是一些 ...

  7. 【转】C++里定义全局变量和函数常用方法

    http://blog.csdn.net/niying/article/details/637084 1:在头文件是声明变量,然后在使用的文件中用exten标识. ".h": in ...

  8. hdu2565java

    放大的X Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissio ...

  9. File类最基础知识

    package File; /** * 创建一个文件: * 判断是否存在,若存在,则创建,若不存在,则删除,最后输出文件是否存在. */ import java.io.File; import jav ...

  10. NC portal怎么重新开始入门,整个配置过程包括配置一个节点

    有一份文档,之后会上传,暂时不上传