資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在HTML5中繪製SVG Logo？
在下面的文章中，我們將學習如何在HTML5中繪製SVG logo。在我們深入文章之前，讓我們先討論一些關於SVG的內容。可縮放向量圖形（SVG）是一種影像格式，它使用向量資料。與其他格式不同，SVG不使用獨特的畫素來構建影像，而是使用向量資料。
使用SVG的最大好處是：可以使用SVG製作可以縮放至任何解析度的圖片，這使得它們非常適合網頁設計以及許多其他應用。
讓我們來看一個簡單的例子來理解SVG
示例
<!DOCTYPE html>
<html>
<body>
<svg width="110" height="150">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="green" />
</svg>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個在網頁上繪製的SVG圓圈，其尺寸在上面的指令碼中給出。
什麼是SVG？
SVG是一種使用XML的標記語言，用於描述二維向量圖形。這是一種基於文字的技術，它與CSS、DOM、JavaScript和SMIL等其他技術一起工作，可以描述任何尺寸的影像。
例如，SVG格式的向量圖片可以縮放而不失真。與JPEG和PNG等點陣圖影像相比，它們還可以本地化，無需使用圖形編輯器。
以下是使用HTML5繪製SVG Logo的示例
示例1
在下面的例子中，我們正在網頁上建立一個SVG logo。
<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">
<defs>
<linearGradient id="tutorial" x1="10%" y1="5%" x2="90%" y2="10%">
<stop offset="0"
style="stop-color:rgb(187, 143, 206);" />
<stop offset="1"
style="stop-color:rgb(192, 57, 43);" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#tutorial)" />
<text fill="#58D68D" font-size="14" font-family="Verdana"
x="50" y="86">TUTORIALSPOINT</text>
</svg>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個帶有線性漸變的橢圓，以及文字“TUTORIALSPOINT”，作為網頁上的logo。
示例2
考慮下面的例子，我們在網頁上建立SVG logo
<!DOCTYPE html>
<html>
<body>
<svg width="140px" height="320px">
<rect x="19" y="19" width="110" height="300"
fill="white" stroke="black" stroke-width="3" />
<circle cx="75" cy="85" r="30"
fill="red" stroke="black" stroke-width="2" />
<circle cx="75" cy="165" r="30"
fill="yellow" stroke="black" stroke-width="2" />
<circle cx="75" cy="245" r="30"
fill="#40CC40" stroke="black" stroke-width="2" />
</svg>
<p>FOLLOW TRAFFIC SIGNALS</p>
</body>
</html>
執行上述指令碼後，它將生成一個輸出，其中包含使用上述指令碼中給定的尺寸在網頁上繪製的交通訊號燈，用作logo。
示例3
讓我們再看一個例子，我們將在網頁上建立一個SVG logo。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG logo</title>
</head>
<body>
<svg height="170" width="400">
<defs>
<linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(184,78,43);stop-opacity:1" />
<stop offset="50%"
style="stop-color:rgb(241,241,241);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,141,52);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
<text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
x="50" y="86">logo</text>
</svg>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，顯示上面提到的SVG logo，它是一個帶有線性漸變的logo，使用上述指令碼中提到的尺寸在網頁上繪製。
更新於：2022年12月16日
2K+ 次瀏覽
廣告