技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

CSS+SVG：畫圓并且文字寫在圓中間

作者:admin    時(shí)間:2021-7-23 20:17:41    瀏覽:

本文介紹如何使用畫圓，并且文字寫在圓中間，主要用到SVG技術(shù)。

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、本實(shí)例沒(méi)用用到CSS樣式，僅用了SVG實(shí)現(xiàn)。

2、了解circle標(biāo)簽的幾個(gè)屬性，cx和cy表示圓心位置，r表示半徑長(zhǎng)度，fill表示填充顏色。

3、了解text標(biāo)簽的幾個(gè)屬性，x和y表示文字位置，text-anchor用于對(duì)齊（開(kāi)始，中間或結(jié)束對(duì)齊），本實(shí)例使用middle表示中間對(duì)齊。另外，“開(kāi)始”對(duì)齊的值是start，“結(jié)束”對(duì)齊的值是end。

fill表示文字顏色，這里是white，白色。font-size是文字大小，font-family是字體。

dx，dy是相對(duì)（x，y）平移的大小。 經(jīng)過(guò)平移，文字起始位置（x+dx, y+dy），看下圖清晰顯示的關(guān)系。

 

標(biāo)簽: css  css3  SVG  實(shí)心圓  
x