SVG 绘制圆角矩形

2018-12-17 16:41| 作者: admin| 查看: 1355| 评论: 0|来自: 蚂蚁部落

使用<rect>标签可以绘制矩形效果,具体参阅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"
    height="60" width="100"
    rx="5" ry="5"
    stroke="red"
    fill="green"/>
</svg>  
</body>
</html>

代码运行效果截图如下:

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

利用<rect>标签成功绘制一个圆角矩形,代码分析如下:

(1).x:规定矩形左上角x轴坐标,虽然是圆角矩形,矩形尖角已经不存在,我们不妨认为它依然存在。

(2).y:规定矩形左上角y轴坐标,与x同理。

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

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

(5).stroke:规定矩形描边的颜色,也就是边框的颜色。

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

(7).rx:规定圆角x轴半径尺寸。

(8).ry:固定圆角y轴半径尺寸。

上述代码中,rx与ry的值相等,说明矩形的四个圆角是正圆的四分之一部分,由于图形较小导致观察比较困难一些,读者朋友可以自行绘制一个较大的圆角矩形,那么四个角的特点将十分明显。

rx与ry值相当,圆角就是正圆的四分之一,如果不相等,那么圆角将是椭圆的四分之一。

代码实例如下:

[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"
    rx="5" ry="15"
    stroke="red"
    fill="green"/>
</svg>  
</body>
</html>

代码运行效果截图如下:

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

上面代码绘制了一个圆角是椭圆的圆角矩形。

[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"
    rx="5" ry="15"
    stroke="red"
    fill="green"
    fill-opacity="0.5"/>
</svg>  
</body>
</html>

代码运行效果截图如下:

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

通过fill-opacity属性可以设置元素填充透明度,属性值介于0-1之间。

0表示完全透明,1表示完全不同命。

同样的道理,也可以设置描边,也就是边框的透明度,stroke-opacity="0.5"。

[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"
    rx="5" ry="15"
    stroke="rgba(255,0,0,0.5)"
    fill="rgba(125,255,158,0.5)"/>
</svg>  
</body>
</html>

代码运行效果截图如下:

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

设置边框或者填充的透明度没必要非要使用fill-opacity和stroke-opacity属性。

只要将fill或者stroke-opacity属性值设置为带有透明度效果即可。

关于可以允许的颜色值可以参阅CSS 颜色值类型一章节。

图案的填充和描边效果不但可以是颜色值也可以是渐变或者图案,考虑到篇幅问题,本文不做介绍。

具体可以参阅SVG填充、描边和透明度一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部