来源:自学PHP网 时间:2018-02-07 18:04 作者: 阅读:次
[导读] 一个rect元素代表一个矩形。通过这个元素你可以画出不同宽度,不同高度,以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。...
一个 一个SVG矩形的简单例子下面是一个绘制SVG矩形的简单例子。 <svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100" width="100" style="stroke:#006600; fill: #00cc00"/> </svg> SVG矩形的位置由 SVG矩形的尺寸由
下面的图形是上面代码的返回结果: 圆角矩形我们也可以绘制圆角的SVG矩形。 <svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="50" width="50" rx="5" ry="5" style="stroke:#006600; fill: #00cc00"/> <rect x="70" y="10" height="50" width="50" rx="10" ry="10" style="stroke:#006600; fill: #00cc00"/> <rect x="130" y="10" height="50" width="50" rx="15" ry="15" style="stroke:#006600; fill: #00cc00"/> </svg> 上面的代码的返回结果如下: 上面的例子中,三个圆角矩形的 下面的两个例子中, <svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="50" width="50" rx="10" ry="5" style="stroke:#006600; fill: #00cc00"/> <rect x="130" y="10" height="50" width="50" rx="10" ry="15" style="stroke:#006600; fill: #00cc00"/> </svg> 上面的代码的返回结果如下: 描边矩形你可以使用 <rect x="20" y="20" width="100" height="100" style="stroke: #009900; stroke-width: 3; fill: none; " /> 上面的代码的返回结果如下: 你还可以使用 <rect x="20" y="20" width="100" height="100" style="stroke: #009900; stroke-width: 3; stroke-dasharray: 10 5; fill: none; " /> 上面的代码的返回结果如下: 填充矩形你可以使用 <rect x="20" y="20" width="100" height="100" style="stroke: #009900; fill: none; " /> 这时,SVG矩形的填充色将和浏览器的页面颜色一样。 你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。 <rect x="20" y="20" width="100" height="100" style="stroke: #009900; fill: #33ff33; " /> 最后,你可以用 <rect x="20" y="20" width="100" height="100" style="stroke: #009900; fill: #33ff33; " /> <rect x="50" y="50" width="100" height="100" style="stroke: #000099; fill: #3333ff; fill-opacity: 0.5; " /> 上面的代码的返回结果如下: 返回SVG教程目录 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com