国产目拍亚洲精品yt166,久久E热在这里只有精品99,亚洲AV永久无码精品三区在线

技術(shù)頻道 - html技術(shù)

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

作者:admin 時間:2021-7-23 20:17:41 瀏覽:

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

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>

execcode getcode

代碼解釋

1、本實例沒用用到CSS樣式，僅用了SVG實現(xiàn)。

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

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

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

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