SVG绘制矩形简单示例分享

Stella981
• 阅读 691

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

1、简单矩形

效果图如下:

SVG绘制矩形简单示例分享

关键代码:

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

rect 代表矩形;

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

2、矩形填充颜色及边框

效果图如下:

SVG绘制矩形简单示例分享

关键代码:

<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绘制矩形简单示例分享

关键代码:

<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绘制矩形简单示例分享

关键代码:

<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绘制矩形简单示例分享

关键代码:

<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之圆形”部分,希望大家届时来浏览,谢谢大家。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
3年前
svg中viewbox图解分析
svg中有一个viewbox属性,中文翻译为视区,就是在svg上截取一小块,放大到整个svg显示。这个属性初学的话有点难以理解,这边做一个简单的示例,一看就明白了。1)先来一个svg,宽高各位300,设置一下边框:html运行效果:这边其实就是一个300300的矩形。2)svg里面画一个矩形:html运行效果:3)设置svg的viewbox属性:html先
Wesley13 Wesley13
3年前
java反射, 不看你可别后悔
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Easter79 Easter79
3年前
SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分1、简单圆形效果图如下:!(http://static.oschina.net/uploads/space/2016/0223/221143_UhEK_2619189.png)关键代码:<svg xmlns"http://www.w3.org/2000/svg" version"1.1
Stella981 Stella981
3年前
SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签<svgwidth"100%"height"100%"version"1.1"xmlns"http://www.w3.org/2000/svg"<gtransform"translate(00)"
Stella981 Stella981
3年前
SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分1、简单圆形效果图如下:!(http://static.oschina.net/uploads/space/2016/0223/221143_UhEK_2619189.png)关键代码:<svg xmlns"http://www.w3.org/2000/svg" version"1.1
Easter79 Easter79
3年前
SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签<svgwidth"100%"height"100%"version"1.1"xmlns"http://www.w3.org/2000/svg"<gtransform"translate(00)"
Easter79 Easter79
3年前
SVG绘制矩形简单示例分享
最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分1、简单矩形效果图如下:!(http://static.oschina.net/uploads/space/2016/0222/213915_Umuu_2619189.png)关键代码:<svg
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。