如何在HTML中使用SVG標籤繪製圓形？

HTML的SVG標籤是一個容器，用於描述二維圖形。SVG代表可縮放向量圖形，它在任何向量圖的X和Y座標系中表示二維圖形。這種型別的標籤主要用於繪製向量圖，例如圓形、矩形、圓角矩形、正方形、三角形、星形等。

有多種方法可以使用SVG標籤繪製圓形，例如使用HTML中的``標籤、``標籤以及``標籤。在這裡，我們將學習這三個標籤中的兩個，即``和``標籤。

語法

以下語法用於示例：

<svg> </svg>

這是HTML中的一個圖形元素，可以用來繪製不同型別的形狀，例如圓形、矩形、正方形等。

<ellipse> </ellipse>

``標籤的屬性

圓形中使用的屬性如下：

  • r − ‘r’屬性定義圓形的半徑。

  • cx − ‘cx’屬性定義圓形中心的‘x’座標。屬性長度以水平方向測量。

  • cy − ‘cy’屬性定義圓形中心的‘y’座標。屬性長度以垂直方向測量。

  • stroke − stroke屬性定義圓形的輪廓並將其顏色設定為其值。

  • stroke-width − 此屬性定義寬度的長度。

  • fill − 此屬性填充圓形的顏色。

示例1

在這個例子中，HTML程式碼建立一個名為“Circle”的簡單網頁。文字“使用SVG繪製圓形”出現在標題元素中，表明該頁面的目標是使用SVG顯示一個圓形。圓形是使用SVG元素繪製的。SVG元素使圓形元素能夠設定某些屬性，例如r、cx、cy、stroke和stroke-width，從而在網頁上生成一個完整的圓形。

<!DOCTYPE html>
<html>
<title>Circle</title>
<head>
</head>
<body>
   <h1>Circle using SVG</h1>
   <svg>
      <circle r="45" cx="80" cy="100" stroke="green" stroke-width="4" fill="#bf6660">
      </circle>
   <svg>
</body>
</html>

示例2

在下面的例子中，我們將使用svg元素內的名為ellipse的元素來繪製圓形。為了設計圓形的良好形狀，它使用了一些SVG屬性。

<!DOCTYPE html>
<html>
<title>Circle</title>
<head>
   <style>
      ellipse{
         stroke: red;
         stroke-width: 8;
      }
   </style>
</head>
<body>
   <h1>Circle using SVG and Ellipse</h1>
   <svg>
      <svg height="240" width="400">
         <ellipse cx="180" cy="80" rx="100" ry="50"/>
      </svg>
   </svg>
</body>
</html>

SVG的優點

  • SVG影像可縮放且可縮放。

  • 這種型別的圖形不會丟失影像質量。

  • 這種型別的影像可以在任何文字編輯器中編輯。

  • 這種型別的向量圖最適合徽標。

結論

我們瞭解了使用SVG標籤繪製圓形的示例。然後我們在上面的例子中看到了Ellipse和SVG標籤之間的區別。使用SVG的主要目的是它的cx和cy座標軸屬性，它們顯示中心方向，並透過提供最佳值來幫助繪製圓形。

更新於：2023年5月15日

608 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告