web-dev-qa-db-ja.com

SVGシャドウルートが閉じています

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

…そしてSpriteからHTMLに画像を挿入しました：

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

それはうまく機能しますが、次の画像はシャドウDOMが閉じていることを示しています。

svg shadow dom

JavaScriptなしでこのSVGのいくつかのスタイルをアニメーション化するにはどうすればよいですか？しかし、JavaScriptが唯一の方法である場合、それを改善する方法はありますか？

csssvggulpshadow-domsvg-sprite
9
Артём Богосьян

参照される要素のDOMは、参照するHTMLページのDOMの一部ではありません。独立したスタイルシートがあります。

ただし、シャドウ要素は、参照元の<use>要素。つまり、参照される要素がSpriteまたはSpriteに関連付けられたスタイルシートでスタイル自体を設定しない限り、<use>要素。

12
ccprog

スタイル設定のfill属性で「currentColor」プロパティを使用できます。 icon.svg

「icon-ufo」クラスのスタイルは次のようになります

.icon-ufo {
    color: green;
}

.icon-ufo:hover {
   color: red;
}
2
Evgeniy Boytsov