PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
技术文章
>
web前端
>
H5教程
SVG基础|绘制SVG矩形
原创
2016-05-17 09:07:33
1847浏览
一个
元素代表一个SVG矩形。通过这个元素你可以画出不同宽度,不同高度,以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。
一个SVG矩形的简单例子
下面是一个绘制SVG矩形的简单例子。
style="stroke:#006600; fill: #00cc00"/>
复制代码
SVG矩形的位置由x和y属性决定。请记住,这个位置是相对于任何它最接近的父元素的位置。
SVG矩形的尺寸由width和height属性决定。
style属性允许你为矩形设置附加的样式,如描边色,描边宽度和填充色等。
下面的图形是上面代码的返回结果:
圆角矩形
我们也可以绘制圆角的SVG矩形。rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度,ry属性则决定圆角的高度。下面的例子中,三个矩形的圆角分别被设置为5像素、10像素和15像素,请注意观察他们各自圆角的大小变化。
rx="5" ry="5"
style="stroke:#006600; fill: #00cc00"/>
rx="10" ry="10"
style="stroke:#006600; fill: #00cc00"/>
rx="15" ry="15"
style="stroke:#006600; fill: #00cc00"/>
复制代码
上面的代码的返回结果如下:
上面的例子中,三个圆角矩形的rx和ry值都是相同的。如果你单独设置了rx的值,那么ry的值和rx相同。这是定义SVG圆角矩形的简写方式。
下面的两个例子中,rx的值都设置为10像素,但是ry的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。
rx="10" ry="5"
style="stroke:#006600; fill: #00cc00"/>
rx="10" ry="15"
style="stroke:#006600; fill: #00cc00"/>
复制代码
上面的代码的返回结果如下:
描边矩形
你可以使用stroke属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色,边框的宽度为3像素。
style="stroke: #009900;
stroke-width: 3;
fill: none;
"
/>
复制代码
上面的代码的返回结果如下:
你还可以使用stroke-dasharray属性将矩形的边框设置为虚线。看下面的例子:
style="stroke: #009900;
stroke-width: 3;
stroke-dasharray: 10 5;
fill: none;
"
/>
复制代码
上面的代码的返回结果如下:
填充矩形
你可以使用fill属性来为SVG矩形填充颜色。例如将矩形的颜色填充为none。
style="stroke: #009900;
fill: none;
"
/>
复制代码
这时,SVG矩形的填充色将和浏览器的页面颜色一样。
你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。
style="stroke: #009900;
fill: #33ff33;
"
/>
复制代码
最后,你可以用fill-opacity属性来设置填充矩形的透明度。下面的例子中,两个句子部分叠加在一起,上面的矩形设置为50%的填充透明度。
style="stroke: #009900;
fill: #33ff33;
"
/>
style="stroke: #000099;
fill: #3333ff;
fill-opacity: 0.5;
"
/>
复制代码
上面的代码的返回结果如下:
本文版权属于jQuery之家,转载请注明出处:
http://www.htmleaf.com/ziliaoku/ ... g/201506031964.html
PHP课程
HTML视频教程
CSS视频
JS视频教程
Vue视频教程
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
上一条:
SVG基础|SVG图形描边
下一条:
HTML5 CANVAS:绘制阴影和填充模式
编程学习群
技术答疑交流
关注公众号
获取学习资源
相关文章
查看更多
如何利用input事件来监听移动端的输入_html5教程技巧
详解HTML5 Canvas绘制时指定颜色与透明度的方法_html5教程技巧
深入解析HTML5 Canvas控制图形矩阵变换的方法_html5教程技巧
实例讲解使用SVG制作loading加载动画的方法_html5教程技巧
实例讲解利用HTML5 Canvas API操作图形旋转的方法_html5教程技巧
热门课程
打开APP,随时随地在线学习!
首页
课程
文章
问答
博客
词典
手册
资源
搜索
APP下载
PHP培训
新
首页
课程
路径
文章
PHP培训
精品课
下载