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

Question

CSSでsvg-spriteをアニメーション化しようとしました。 私はスプライトを作成し、一息からそれを注入しました：

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>要素からスタイルを継承します。これは、参照された要素がスプライト内またはスタイルシート内でスプライト内のスタイル自体を設定しない限り、<use>要素をスタイリングすることによってアイコン上の継承可能なスタイルプロパティをすべて変更およびアニメートできることを意味します。