資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究CSS 與 SVG 在實際應用中的用途有哪些？
開發者使用 CSS 來為網頁內容設定樣式並使其正確顯示。它可以用來使任何內容更具吸引力。
SVG 的全稱是可縮放向量圖形。SVG 是一種影像型別，就像 jpg 或 png 一樣。jpg 或 png 是使用畫素網格建立的柵格影像。如果我們放大柵格影像，它就會開始變得模糊。
向量影像是使用繪製向量並將其連線以形成形狀的數學函式建立的。由於它不是畫素網格，因此即使我們放大超過 100 倍，它也不會變得模糊。
每當我們將 CSS 與向量影像一起使用時，它都會使其更具吸引力，並且我們可以在網頁上建立強大的影像。在本教程中，我們將學習 CSS 與 SVG 在實際應用中的用途。
示例 1（向 SVG 影像新增基本樣式）
在下面的示例中，我們以 SVG 格式建立了圓形形狀。我們使用了 'svg' HTML 標籤來建立 SVG 影像。此外，我們還為視區設定了尺寸。此外，我們還在視區中設定了圓形的 x 和 y 位置。
我們使用 'circle' 標籤在 CSS 中訪問 svg 影像並對其設定樣式。使用者可以觀察到，他們可以從 CSS 中控制填充顏色、描邊顏色和描邊寬度。但是，他們也可以使用各種 CSS 屬性新增其他樣式。
<html>
<head>
<style>
circle {
fill: blue;
stroke: red;
stroke-width: 3;
}
</style>
</head>
<body>
<h3> Using the CSS with SVG <i> to style the SVG image </i> </h2>
<svg viewBox="0 0 100 100">
<circle cx="20" cy="20" r="10" />
</svg>
</body>
</html>
示例 2（向 SVG 影像新增懸停效果）
在下面的示例中，我們以 SVG 向量格式建立了兩個正方形形狀。此外，我們還為每個形狀提供了類名。我們使用它們的類名在 CSS 中訪問 HTML 元素並設定填充顏色。此外，我們還為形狀設定了懸停效果。在輸出中，將滑鼠懸停在形狀上，您可以觀察其顏色如何變化。
<html>
<head>
<style>
.shape {fill: green;}
.shape:hover {fill: #ff0000;}
</style>
</head>
<body>
<h4> Using the CSS with SVG <i> to add hover effect on the SVG image. </i> </h4>
<svg viewBox="0 0 960 600">
<g id="shapes">
<path class="shape" d="M100,100 L150,50 L200,100 L150,150 Z" />
<path class="shape" d="M400,100 L450,50 L500,100 L450,150 Z" />
</g>
</svg>
</body>
</html>
示例 3（向 SVG 影像新增動畫）
在下面的示例中，我們向 SVG 影像添加了動畫。在這裡，我們使用 SVG 建立了圓形形狀。在 CSS 中，我們使用其 id 訪問圓形並添加了 'move' 關鍵幀作為動畫。
在 'move' 關鍵幀中，我們更改了圓形的垂直位置，這向我們展示了一個彈跳的圓形。
<html>
<head>
<style>
#ball {
animation: move 3s infinite;
transform-origin: center bottom;
}
@keyframes move {
0% {transform: translateY(0);}
50% {transform: translateY(-30px);}
100% {transform: translateY(0);}
}
</style>
</head>
<body>
<h3> Using the CSS with SVG <i> to add hover effect on the SVG image. </i> </h3>
<svg viewBox="0 0 100 100">
<circle id="ball" cx="30" cy="30" r="15" fill="aqua" />
</svg>
</body>
</html>
我們學習瞭如何將 CSS 與 SVG 影像一起使用。在第一個示例中，我們學習了 CSS 與 SVG 的基本用法。在第二個示例中，我們在 SVG 影像上添加了懸停效果；在最後一個示例中，我們在 SVG 影像上添加了動畫。
在實際開發中，使用者可以使用 CSS 與 SVG，新增動畫並建立 GIF。
67 次瀏覽
