SVG <rect> 绘制矩形

2018-8-22 00:44| 作者: admin| 查看: 1220| 评论: 0|来自: 蚂蚁部落

利用SVG中的<rect>标签即可实现绘制矩形效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="300" height="200">
  <rect 
    x="10" y="10" 
    width="100" height="60"
    stroke="red" 
    stroke-width="2"
    fill="green"/>
</svg>  
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/17/153750cszf4eff1fjf9aaf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面成功绘制了一个简单的矩形框效果,标签属性解析如下:

(1).x:规定矩形左上角x轴坐标。

(2).y:规定矩形左上角y轴坐标。

(3).width:规定矩形的宽度。

(4).height:规定矩形的高度。

(5).stroke:规定边框的颜色。

(6).fill:规定矩形的填充色。

(7).stroke-width:规定边框的宽度。

我们还可以设置矩形的透明度,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="300" height="200">
  <rect 
    x="10" y="10"
    height="60" width="100"
    stroke="red"
    fill="green"
    stroke-width="2"
    fill-opacity="0.5"/>
</svg>  
</body>
</html>

使用fill-opacity属性即可实现,值介于0-1之间,0表示完全透明,1表示完全不透明。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/17/154005lxmzyeyjqm1djsdx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

svg元素属性也可以使用对应的css属性替代,代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
rect{
  height:100px;
  width:100px;
  stroke:red;
  fill:green;
  stroke-width:2px;
  fill-opacity:0.5
}
</style>
</head>
<body>
<svg width="300" height="200">
  <rect x="10" y="10"/>
</svg>  
</body>
</html>

上述代码通过CSS实现对<rect>元素的控制,效果相同。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部