我试着用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是关闭的。
我如何才能动画的一些风格的SVG没有JavaScript？但如果JavaScript是唯一的方法，如何做得更好？
3条答案
按热度按时间ijnw1ujt1#
被引用元素的DOM不是引用HTML页面的DOM的一部分。它具有独立的样式表。
但是shadow元素继承了引用
<use>元素的样式。这意味着，只要被引用的元素本身没有在sprite或与sprite关联的样式表中设置样式，您就可以通过设置<use>元素的样式来更改（和动画化）图标上的每个可继承的样式属性。ohfgkhjo2#
你可以在fill属性中使用“currentColor”属性来设置样式：
和样式为“icon-ufo”类将像
3j86kqsm3#
我也遇到过同样的问题，在firefox与svgs。SVG图标在Firefox中不显示。在dom树中找到#shadow-root（已关闭）。但是发现SVG结束标签或者在错误的位置或者完全丢失。请确认一下。