SVG Shadow-Root ist geschlossen

Question

Ich habe versucht, ein SVG-Sprite mit CSS zu animieren. Ich habe ein Sprite und injiziert es von schluck erstellt:

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 zu HTML eingefügt:

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

Und es funktioniert gut, aber die folgende Abbildung zeigt den Schatten DOM ist geschlossen.

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

Answer 1

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

Das Schattenelement erbt jedoch Stile aus dem referenzierenden <use> Element. Solange das referenzierte Element die Stile selbst nicht im Sprite oder in einem mit dem Sprite verknüpften Stylesheet festlegt, können Sie jede vererbbare Stileigenschaft des Symbols ändern (und animieren), indem Sie das Element <use> stylen.