SVG shadow-root가 닫힙니다.

CSS로 svg-sprite를 움직이려고했습니다. 나는 스프라이트를 생성 꿀꺽 꿀꺽에서 주입했습니다SVG shadow-root가 닫힙니다.

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가 유일한 방법 일 경우 더 잘 수행하는 방법은 무엇입니까?

출처

2017-12-10 Артём Богосьян

참조 된 요소의 DOM은 참조하는 HTML 페이지의 DOM의 일부가 아닙니다. 격리 된 스타일 시트가 있습니다.

그러나 shadow 요소는 참조하는 <use> 요소의 스타일을 상속합니다. 즉, 참조 된 요소가 스프라이트 또는 스프라이트와 연결된 스타일 시트에서 스타일 자체를 설정하지 않는 한 <use> 요소를 스타일 지정하여 아이콘에서 상속 가능한 모든 스타일 속성을 변경 (애니메이션) 할 수 있습니다.

출처

2017-12-10 22:49:28 ccprog

_fill_과 같은 __path__ 속성은 어떻습니까? –

@ yuяi'fill'은 [프레젠테이션 속성] (https://www.w3.org/TR/SVG11/styling.html#UsingPresentationAttributes)입니다. 즉, 속성으로 작성 될 수 있지만 스타일처럼 취급됩니다 요소에 대한 규칙이 사용자 스타일 시트의 시작 부분에 삽입되었습니다. – ccprog

SVG shadow-root가 닫힙니다.

답변

관련 문제