你的位置:首页 > 软件开发 > 网页设计 > HTML5 SVG之矩形简单示例分享

HTML5 SVG之矩形简单示例分享

发布时间:2016-02-22 22:00:06
最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分1、简单矩形效果图如下:关键代码:<svg ="http://www.w3.org/2000/svg&qu ...

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

1、简单矩形

效果图如下:

HTML5 SVG之矩形简单示例分享

关键代码:

<svg ="http://www.w3.org/2000/svg" version="1.1">    <rect width="300" height="100"></rect>      </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>

代码解析:

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>

5、圆角矩形

效果图如下:

HTML5 SVG之矩形简单示例分享

关键代码:

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


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

关键词:HTML

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