[jQuery] 使用 js 讓用 img 嵌入的 svg 可以變色

2021-07-17 08:51:15

最近覺得 SVG 很好用，在這個解析度非常多元的世代裡，靠 SVG 就可以做各種圖樣加上放大縮小都不會失真真的很方便，而且還可以用 HTML 的 img 標籤嵌入，但用 img 嵌入後就無法直接用 css 控制顏色，所以想要直接用 CSS 控制的話可以用加的 jQuery，就可以輕鬆愉快地控制了。

view plain copy to clipboard print

jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Check if the viewport is set, if the viewport is not set the SVG wont't scale.
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
}
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});

加了這段後，就可以直接用 CSS 控制顏色。

view plain copy to clipboard print

<img class="svg icon" src="svg/favorite.svg" alt="favorite">

view plain copy to clipboard print

.icon{
cursor: pointer;
}
.icon:hover path{
fill: #de5b78;
}

記得控制 svg 填色是用 fill 就好了。

[jQuery] 使用 .on 將事件綁到動態產生的元素上 C3.js- 以 D3.js 為基礎的圖表函式庫

你可能也會喜歡的

[javascript] 複製內容至剪貼簿

[jQuery] 點選圖片後切換循環播放效果

slick- 好用的圖片輪播套件，也支援手機手勢及 RWD

Relative Time Element- 方便的前端時間相關 Web Components

Uiverse.io：開源 UI 元素的創意寶庫

Aceternity UI：豐富的網站前端動態效果元件庫

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。