SVG shadow-root已关闭

Question

我试图用CSS动画svg-sprite.我已经创建了一个sprite并从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/'))
});

...并将精灵中的图像插入HTML:

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

它运行良好,但下图显示了DOM关闭的影子.

如何在没有JavaScipt的情况下为这个SVG的某些样式制作动画？但如果JavaScipt是​​唯一的方法,那么如何更好地做到这一点？

Answer 1

引用元素的DOM不是引用HTML页面的DOM的一部分.它有孤立的样式表.

但是shadow元素从引用<use>元素继承样式.这意味着只要引用的元素不在sprite或与sprite关联的样式表中设置样式本身,就可以通过样式化<use>元素来更改(和动画)图标上的每个可继承样式属性.

Answer 2

您可以在填充属性中使用“currentColor”属性来设置样式：

“icon-ufo”类的样式将类似于

.icon-ufo {
    color: green;
}

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