Lời nói đầu
Hiện tại đa số các design khi thiết kế sẽ sử dụng các bộ font icon như fontAwesome, Ionicons, simpleicon … đối với các font icon này thay đổi màu sắc rất đơn giản tuy nhiên sẽ có nhiều icon không như ý họ sẽ phải tự vẽ ra để sử dụng hoặc download các icon trên flaticon về. Việc sử dụng icon để tối ưu nhất thì ta thường sử dụng định dạng svg. Hôm nay chúng ta sẽ cùng tìm hiểu cách để thay đổi màu sắc file svg.
Các cách để đổi màu file định dạng SVG
Trường hợp dùng trực tiếp
<div class="circle">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" class="circle" stroke-width="4" fill="yellow" />
</svg>
</div>
Ta sử dụng CSS để thay đổi màu
Trường hợp dùng qua thẻ IMG
<img class="circle" src="circle.svg" />
có 2 cách:
Cách 1 dùng Jquery
/*
* Replace all SVG images with inline SVG
*/
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');
});
sau đó thay đổi màu bằng css
.circle path {
fill: #000;
}
//hoặc
.circle path {
background-color: #000;
}
Cách 2 dùng filter css
nhưng phải tinh chỉnh nhiều hơn mới được màu như ý
.circle {
filter: invert(1);
// filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
Trường hợp dùng Mask image
Sử dụng background-color
.icon-facebook {
mask-image: url('circle.svg');
display: block;
width: 20px;
height: 20px;
background-color: blue;
}
Nguồn:
https://stackoverflow.com/questions/22252472/change-svg-color
https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color
Trên đây là các cách mình tìm hiểu được để thay đổi màu file svg mong sẽ hữu ích cho mọi người.
Nguồn: Sưu tầm từ internet via Devmaster Academy
.png "Lập trình frontend với reacjs (Full)")