La racine de l'ombre SVG est fermée

Question

J'ai essayé d'animer un svg-Sprite avec CSS. J'ai créé un Sprite et je l'ai injecté à partir de gulp:

gulp.task('svgstore', function () {
var svgs = gulp
    .src('app/svg/*.svg')
    .pipe(svgmin(function (file) {
        return {
            plugins: [{
                cleanupIDs: {
                    minify: true
                }
            }]
        }
    }))        
    .pipe(svgstore({ inlineSvg: true }));

function fileContents (filePath, file) {
    return file.contents.toString();
}   

return gulp
    .src('app/*.html')
    .pipe(inject(svgs, { transform: fileContents }))
    .pipe(gulp.dest('app/'))
});

… Et inséré des images du Sprite au HTML:

<svg class="icon-ufo" >
    <use xlink:href="img/Sprite.svg#ufo" aria-hidden="true"></use>
</svg>

Et cela fonctionne bien, mais l'image suivante montre que le DOM d'ombre est fermé.

Comment puis-je animer certains styles de ce SVG sans JavaScript? Mais si JavaScript est le seul moyen, comment le faire mieux?

Answer 1

Le DOM de l'élément référencé ne fait pas partie du DOM de la page HTML de référence. Il a des feuilles de style isolées.

Mais l'élément shadow hérite des styles du référencement <use> élément. Cela signifie que tant que l'élément référencé ne définit pas les styles lui-même dans le Sprite ou dans une feuille de style associée au Sprite, vous pouvez modifier (et animer) chaque propriété de style héritable sur l'icône en stylisant le <use> élément.

Answer 2

Vous pouvez utiliser la propriété "currentColor" dans votre attribut fill pour le style:

et les styles de la classe "icon-ufo" seront comme

.icon-ufo {
    color: green;
}

.icon-ufo:hover {
   color: red;
}