SVG <circle> 绘制圆形

2018-9-21 15:25| 作者: admin| 查看: 1137| 评论: 0|来自: 蚂蚁部落

利用SVG的<circle>标签可以绘制圆形图案。

使用<ellipse>标签可以绘制椭圆,它是一个特殊的圆。

将其椭圆x轴半径与y轴半径设置为相同时,就是一个正圆,与<circle>绘制效果相同。

关于<ellipse>绘制原型可以参阅SVG <ellipse> 绘制椭圆一章节。

代码实例如下:

[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">
  <circle 
    cx="40" cy="40" 
    r="24" 
    stroke="red" 
    stroke-width="2"
    fill="green"/>
</svg>  
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/16/172731clavwwp8pv7vjlvw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码利用<circle>绘制了一个红色边框绿色填充的圆,代码分析如下:

(1).cx:规定圆心在x轴的坐标。

(2).cy:规定圆心在y轴的坐标。

(3).r:规定半径的尺寸。

(4).stroke:规定圆的描边也就是边框的宽度。

(5).fill:规定圆的填充颜色。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
circle {
  stroke:red;
  stroke-width:2px;
  fill:green;
}
</style>
</head>
<body>
<svg width="300" height="200">
  <circle 
    cx="40" cy="40" 
    r="24"/>
</svg>  
</body>
</html>

也可以使用与<circle>元素属性对应的css属性来设置相关样式。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部