CSS與SVG的真實世界應用是什麼？-css教學-PHP中文網

範例 1（向 SVG 圖像添加基本樣式）

範例2（在SVG影像上新增懸停效果）

Using the CSS with SVG to add hover effect on the SVG image.

範例 3（將動畫加入 SVG 圖像）

首頁

web前端

css教學

CSS與SVG的真實世界應用是什麼？

PHPz

Sep 17, 2023 pm 04:05 PM

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 id="Using-the-CSS-with-SVG-i-to-add-hover-effect-on-the-SVG-image-i"> 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 存取圓，並將「移動」關鍵影格新增為動畫。

在「移動」關鍵影格中，我們改變圓圈的垂直位置，這向我們顯示了一個彈跳的圓圈。

<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 id="Using-the-CSS-with-SVG-i-to-add-hover-effect-on-the-SVG-image-i"> 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。

以上是CSS與SVG的真實世界應用是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn