SVG卷影根已关闭

Question

我曾经尝试过用CSS来制作一个svg-sprite动画。我已经创建了一个精灵，并将其从吞咽中注入：

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

…并将来自sprite的图像插入到HTML中：

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

它工作得很好，但是下图显示了阴影DOM是封闭的。

​

如何在没有JavaScript的情况下动画这个SVG的一些样式？但是，如果JavaScript是唯一的方法，如何做得更好呢？