webentwicklung-frage-antwort-db.com.de

SVG Shadow-Root ist geschlossen

Ich habe versucht, ein SVG-Sprite mit CSS zu animieren. Ich habe ein Sprite erstellt und es aus dem Schluck injiziert:

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/'))
});

… Und Bilder aus dem Sprite in HTML eingefügt:

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

Und es funktioniert gut, aber das folgende Bild zeigt, dass das Schatten-DOM geschlossen ist.

svg shadow dom

Wie kann ich einige Stile dieser SVG ohne JavaScript animieren? Aber wenn JavaScript der einzige Weg ist, wie kann man es besser machen?

Das DOM des referenzierten Elements ist nicht Teil des DOM der referenzierenden HTML-Seite. Es hat Stylesheets isoliert.

Das shadow-Element erbt jedoch Stile von dem referenzierenden <use> Element. Dies bedeutet, dass Sie, solange das referenzierte Element nicht die Stile selbst im Sprite oder in einem mit dem Sprite verknüpften Stylesheet festlegt, jede vererbbare Stileigenschaft auf dem Symbol ändern (und animieren) können, indem Sie <use> Element.

12
ccprog

Sie können die Eigenschaft "currentColor" in Ihrem Füllattribut für das Stylen verwenden: icon.svg

und Stile für "icon-ufo" -Klasse werden wie folgt aussehen

.icon-ufo {
    color: green;
}

.icon-ufo:hover {
   color: red;
}
2
Evgeniy Boytsov