最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享&ldquo;svg之矩形&rdquo;部分1、简单矩形效果图如下:关键代码:<svg ="http://www.w3.org/2000/svg&qu ...
最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分
1、简单矩形
效果图如下:
关键代码:
<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、矩形位置
效果图如下:
关键代码:
<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、圆角矩形
效果图如下:
关键代码:
好了今天的分享这里结束,我也是一边学习一边分享的,若有错误的地方请大家指正,下次分享“svg之圆形”部分,希望大家届时来浏览,谢谢大家。
原标题:HTML5 SVG之矩形简单示例分享
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。