技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS+SVG:画圆并且文字写在圆中间

作者:admin    时间:2021-7-23 20:17:41    浏览:

本文介绍如何使用画圆,并且文字写在圆中间,主要用到SVG技术。

CSS+SVG:画圆并且文字写在圆中间
CSS+SVG:画圆并且文字写在圆中间

完整HTML代码

<!DOCTYPE html>
<html lang='en' class=''>

<head>

  <meta charset='UTF-8'>
  <title>Demo</title>
 
</head>

<body>
  <svg width="250" height="250">
  <circle cx="125" cy="125" r="100" fill="#aeaeae" />
  <text x="50%" y="50%" text-anchor="middle" fill="white" font-size="80px" font-family="Arial" dy=".3em">BCD</text>
Sorry, your browser does not support inline SVG.
</svg>

</body>

</html>

execcodegetcode

代码解释

1、本实例没用用到CSS样式,仅用了SVG实现。

2、了解circle标签的几个属性,cxcy表示圆心位置,r表示半径长度,fill表示填充颜色。

3、了解text标签的几个属性,xy表示文字位置,text-anchor用于对齐(开始,中间或结束对齐),本实例使用middle表示中间对齐。另外,“开始”对齐的值是start,“结束”对齐的值是end

fill表示文字颜色,这里是white,白色。font-size是文字大小,font-family是字体。

dxdy是相对(x,y)平移的大小。 经过平移,文字起始位置(x+dx, y+dy),看下图清晰显示的关系。

 

标签: css  css3  SVG  实心圆  
x
x
  • 站长推荐