SVG shadow-root 已关闭

Question

我尝试用 CSS 制作 svg-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关闭了。

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

Answer 1

引用元素的 DOM 不是引用 HTML 页面的 DOM 的一部分。它具有独立风格 sheets.

但是影子元素继承了引用 <use> 元素的样式。这意味着只要引用的元素不在 sprite 或与 sprite 关联的样式 sheet 中设置样式本身，您就可以更改（和动画）图标上的每个可继承样式属性通过设置 <use> 元素的样式。

Answer 2

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

"icon-ufo" class 的样式将类似于

.icon-ufo {
    color: green;
}

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

SVG shadow-root 已关闭

SVG shadow-root is closed

css

svg

gulp

shadow-dom

svg-sprite