亚洲Av无码专区国产乱码在线,美国一级毛片免费视频观看,新区乱码无人区二精东

技術頻道 - html技術

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

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

本文介紹如何使用畫圓，并且文字寫在圓中間，主要用到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>

execcode getcode

代碼解釋

1、本實例沒用用到CSS樣式，僅用了SVG實現。

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

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

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

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