SVG绘制圆形简单介绍

2018-2-4 10:56| 发布者: admin| 查看: 641| 评论: 0|来自: 钱柜手机网页版

使用<circle>元素可以绘制一个圆形。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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>

上面代码绘制一个带有描边和填充的圆形,下面介绍一下<circle>主要属性的作用:

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

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

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

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

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

也可以使用与<circle>元素属性对应的css属性来设置相关样式,代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部