SVG shadow-root 已关闭答案

【问题标题】：SVG shadow-root is closedSVG shadow-root 已关闭
【发布时间】：2018-05-24 09:27:14
【问题描述】：

我尝试使用 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>

而且效果很好，但是下图显示shadow DOM是关闭的。

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

【问题讨论】：

标签： css svg gulp shadow-dom svg-sprite

【解决方案1】：

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

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

【讨论】：

path 属性如 fill 怎么样？
@yuяi fill 是一个presentation attribute，这意味着它可以写为一个属性，但被视为在用户样式表的开头插入了元素的样式规则。
有帮助的回应！ @ccprog 你能告诉我如何通过 use 标签在我的圈子 svg 上更改 radius 之类的属性吗？
你不能。 r 属性是一个不继承的几何属性。
但只要你的意图是改变圆圈的尺寸，use 元素上的transform 属性将达到相同的效果 - 几乎，因为笔画将与整体大小一起缩放.

【解决方案2】：

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

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

.icon-ufo {
    color: green;
}

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

【讨论】：

感谢 Evgeniy。这很简单，就像一个魅力。