資料結構
網路
關係型資料庫管理系統
作業系統
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
示例
<!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，以及使用上述指令碼中提到的尺寸在網頁上繪製的線性漸變。
更新於: 2022-12-16
2K+ 閱讀量
廣告