html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
Το παραπάνω svg φορτώνει και είναι εγγενώς `fill: #Είναι η πρώτη φορά που παίζω με SVG και δεν είμαι σίγουρος γιατί δεν λειτουργεί.
Εάν ο στόχος σας είναι απλώς να αλλάξετε το χρώμα του λογότυπου και δεν χρειάζεται απαραίτητα να χρησιμοποιήσετε CSS, τότε μην χρησιμοποιήσετε javascript ή jquery, όπως προτάθηκε από κάποιες προηγούμενες απαντήσεις.
Για να απαντήσετε επακριβώς στην αρχική ερώτηση, απλά:
2: #fffκαι αντικαταστήστε το με
fill: #000`
Για παράδειγμα, το logo.svg
σας μπορεί να μοιάζει έτσι όταν ανοίγει σε έναν επεξεργαστή κειμένου:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>
... απλά αλλάξτε το γέμισμα και αποθηκεύστε.
Η απάντηση από τον @Praveen είναι σταθερή.
Δεν μπόρεσα να το κάνω να ανταποκριθεί στην εργασία μου, οπότε έκανα μια λειτουργία jquery hover για αυτό.
CSS
.svg path {
transition:0.3s all !important;
}
JS / JQuery
// code from above wrapped into a function
replaceSVG();
// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#CCC');
}, function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#3A3A3A');
});
Γιατί να μην δημιουργήσετε ένα webfont με την εικόνα ή τις εικόνες svg σας, να εισαγάγετε το webfont στο css και στη συνέχεια να αλλάξετε απλώς το χρώμα της γλυφής χρησιμοποιώντας το χαρακτηριστικό χρώμα του css; Δεν απαιτείται javascript