星空网 > 软件开发 > 网页设计

HTML5 SVG绘制矩形简单示例分享

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

1、简单矩形

效果图如下:

HTML5 SVG绘制矩形简单示例分享

关键代码:

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

代码解析:

rect 代表矩形;

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

 

2、矩形填充颜色及边框

效果图如下:

HTML5 SVG绘制矩形简单示例分享 

关键代码:

<svg ="http://www.w3.org/2000/svg" version="1.1">    <rect width="300" height="100" <span style="font-family: Arial, Helvetica, sans-serif;"></span><span style="font-family: Arial, Helvetica, sans-serif;">></rect>  </span>    </svg>

代码解析:

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

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

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

 

3、矩形透明度

效果图如下:

HTML5 SVG绘制矩形简单示例分享

HTML5 SVG绘制矩形简单示例分享

关键代码:

<svg ="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>

HTML5 SVG绘制矩形简单示例分享

代码解析:

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

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

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

 

4、矩形位置

效果图如下:

HTML5 SVG绘制矩形简单示例分享

关键代码:

<svg ="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、圆角矩形

效果图如下:

HTML5 SVG绘制矩形简单示例分享

关键代码:
<svg ="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之圆形”部分,希望大家届时来浏览,谢谢大家。




原标题:HTML5 SVG绘制矩形简单示例分享

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海外仓的现状:https://www.goluckyvip.com/tag/32903.html
海外仓的业务:https://www.goluckyvip.com/tag/32904.html
海外仓的一件代发:https://www.goluckyvip.com/tag/32905.html
海外仓的意义:https://www.goluckyvip.com/tag/32906.html
海外仓的优劣势:https://www.goluckyvip.com/tag/32907.html
海外仓的优缺点:https://www.goluckyvip.com/tag/32908.html
TikTok斥资210万美元游说美国参议院阻止法案通过 :https://www.goluckyvip.com/news/188220.html
北京飞机票查询(快速查询北京至各地机票价格和航班信息):https://www.vstour.cn/a/366178.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流