使用CSS 設定SVG 影像樣式：一種新穎的方法

在本文中，我們將探索一種使用CSS 嵌入SVG 影像並操縱其外觀的新穎方法，而無需使用CSS使用JS-SVG 框架。

問題陳述

以前，整合 SVG 圖片同時透過 CSS 保持對其元素的存取一直是一個挑戰。雖然 JS-SVG 框架提供了解決方案，但對於具有翻轉效果的簡單圖標實作來說，它們可能很複雜。

解決方案：jQuery SVG 影像替換

我們提出的解決方案涉及取代傳統的 標籤具有「svg」類別。該類別觸發一個 jQuery 腳本，該腳本從指定來源取得內聯 SVG 程式碼並將其插入到 HTML 中。

jQuery 程式碼也保留原始圖片的 ID 和類，確保與 CSS 規則相容。

優點和實現

這種方法提供了幾個優點：

• 簡單的CSS 樣式： SVG 元素現在可以透過CSS訪問，允許顏色變化等修改。
• 跨瀏覽器相容性：此方法主流瀏覽器都支援。
• 簡單：程式碼簡潔，簡單明了，沒有 JS-SVG 框架的複雜性。

實現此解決方案：

1. 使用以下HTML 程式碼嵌入SVG：

2. 在您的專案中包含jQuery 代碼:

jQuery('img.svg').each(function() {
  // ... (jQuery code to replace the image with inline SVG) ...
});

範例與結論

您可以在 http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html 上查看示範。此方法提供了一種在 Web 應用程式中嵌入 SVG 圖像並設定其樣式的便捷高效的方法。