PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > H5教程

SVG基础|绘制SVG矩形

原创
2016-05-17 09:07:33 1847浏览
1.jpg

　　一个元素代表一个SVG矩形。通过这个元素你可以画出不同宽度，不同高度，以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。

　　一个SVG矩形的简单例子

　　下面是一个绘制SVG矩形的简单例子。


  3.    
  4.         style="stroke:#006600; fill: #00cc00"/>

  6.       
复制代码

　　SVG矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。

　　SVG矩形的尺寸由width和height属性决定。

　　style属性允许你为矩形设置附加的样式，如描边色，描边宽度和填充色等。

　　下面的图形是上面代码的返回结果：

2.jpg

　　圆角矩形

　　我们也可以绘制圆角的SVG矩形。rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度，ry属性则决定圆角的高度。下面的例子中，三个矩形的圆角分别被设置为5像素、10像素和15像素，请注意观察他们各自圆角的大小变化。


  3.    
  4.           rx="5" ry="5"
  5.           style="stroke:#006600; fill: #00cc00"/>
  6.    
  7.           rx="10" ry="10"
  8.           style="stroke:#006600; fill: #00cc00"/>
  9.    
  10.           rx="15" ry="15"
  11.           style="stroke:#006600; fill: #00cc00"/>
  12.    
复制代码

　　上面的代码的返回结果如下：

3.jpg

　　上面的例子中，三个圆角矩形的rx和ry值都是相同的。如果你单独设置了rx的值，那么ry的值和rx相同。这是定义SVG圆角矩形的简写方式。

　　下面的两个例子中，rx的值都设置为10像素，但是ry的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。


  3.    
  4.           rx="10" ry="5"
  5.           style="stroke:#006600; fill: #00cc00"/>
  6.    
  7.           rx="10" ry="15"
  8.           style="stroke:#006600; fill: #00cc00"/>
  9.    
复制代码

　　上面的代码的返回结果如下：

4.jpg

　　描边矩形

　　你可以使用stroke属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色，边框的宽度为3像素。
  2.       style="stroke: #009900;
  3.              stroke-width: 3;
  4.              fill: none;
  5.       "
  6.       />      
复制代码

　　上面的代码的返回结果如下：

5.jpg

　　你还可以使用stroke-dasharray属性将矩形的边框设置为虚线。看下面的例子：
  2.       style="stroke: #009900;
  3.              stroke-width: 3;
  4.              stroke-dasharray: 10 5;
  5.              fill: none;
  6.             "
  7.         />      
复制代码

　　上面的代码的返回结果如下：

6.jpg

　　填充矩形

　　你可以使用fill属性来为SVG矩形填充颜色。例如将矩形的颜色填充为none。
  2.       style="stroke: #009900;
  3.              fill: none;
  4.             "
  5.         />         
复制代码

　　这时，SVG矩形的填充色将和浏览器的页面颜色一样。

7.jpg

　　你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。
  2.       style="stroke: #009900;
  3.              fill: #33ff33;
  4.             "
  5.         />     
复制代码
8.jpg
　　最后，你可以用fill-opacity属性来设置填充矩形的透明度。下面的例子中，两个句子部分叠加在一起，上面的矩形设置为50%的填充透明度。
  2.       style="stroke: #009900;
  3.          fill: #33ff33;
  4.         "
  5.         />
  7.       style="stroke: #000099;
  8.          fill: #3333ff;
  9.          fill-opacity: 0.5;
  10.         "
  11.         />            
复制代码

　　上面的代码的返回结果如下：

9.jpg

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506031964.html


PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：SVG基础|SVG图形描边 下一条：HTML5 CANVAS：绘制阴影和填充模式

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！