[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 為基礎的圖表函式庫

你可能也會喜歡的

[Facebook] 客製化 facebook 登入

[Vue.js] 利用 HTML5 File api

[Alpine.js] 指示詞 (Directive)應用之一

Loaf：有許多內建效果並可以客製化的 SVG 動畫圖庫

draw-a-ui：透過 AI 根據用戶繪製的線框和標註生成 UI 設計

金牌程式測試指南：掌握 JavaScript 與 Node.js 測試最佳實踐

課程推薦

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

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