web-dev-qa-db-fra.com

Comment styler un svg en utilisant une feuille de style externe?

J'ai un fichier SVG et je veux l'inclure dans une page HTML. Je souhaite le styler à l'aide d'un fichier CSS externe, mais je ne souhaite pas inclure la référence à la feuille de style dans le fichier SVG lui-même.

Est-ce possible? Alors comment y arriverais-tu?

htmlcsssvg
1
BarbuDorel

Comme déjà répondu dans cette SO question , il est possible de nommer un SVG uniquement s'il fait partie de votre DOM. Si vous le chargez en utilisant, par exemple, une balise <img>, en arrière-plan, seul le code CSS directement inséré dans votre fichier SVG aurait un effet.

Comme décrit dans la question première réponse this article de MDN illustre comment utiliser SVG en ligne.

Toutefois, si vous souhaitez que votre fichier SVG reste dans une ressource externe et ne soit pas obligé de le copier/coller dans votre modèle, chaque fois que cela change (j'espère que vous le souhaitez). ne pensons pas à ce genre de "solution"), vous pouvez la charger dynamiquement dans votre DOM avec un simple appel (non testé) AJAX:

//Assuming you have jQuery available
$.ajax({
    url: './mysvgFile.svg',
    success: function(data) {
        if (data.childNodes.length > 0) { //should be one, _could_ be more
            $('.myDiv').append(data.childNodes[0]);
        } else {
            console.log('invalid SVG');
        }
    },
    error: function(data) {
        console.error('Error loading SVG!');
    }
});

À ce stade, vos feuilles de style peuvent manipuler des éléments de votre SVG.

1
Clijsters