svg의 스타일 부분을 사용하여 사용하는 경우

Question

svg-use 구문을 사용하여 특정 항목에서만 스타일을 포함 할 수 있습니까? 일반적으로 아이콘의 스타일을 쉽게 지정할 수 있지만 아이콘이 nav-item 내에서 사용될 때 svg 아이콘의 일부 스타일을 지정하고 싶습니다.

이것은 어떤 성공도없이 시도한 것입니다.

// css 
.nav-item .part1{ 
opacity: 0.5; 
} 

이 같은 SVG를 사용하지 :

<svg id="svg_sprite" style="display: none;"> 
    <defs> 
    <g id="icon"> 
     <polygon points="476.5,379.778 401.167,..."></polygon> 
     <polygon class="page1" points="221,379.768 85.334,..."></polygon> 
    </g> 
    </defs> 
</svg> 

<li class="nav-item"> 
    <svg viewBox="0 0 512 512" class="icon"> 
    <use xlink:href="#icon"></use> 
    </svg> 
</li> 

Answer 1

대답은 '아니오'이다. 요소가 <use>에 의해 참조되었는지 여부에 따라 요소의 스타일을 지정할 수 없습니다. SVG 사양에 구체적으로 나와 있습니다. 그 이유는 <use>이 참조하는 컨텐트가 개념 상 복제 된 것이며 사실은 DOM의 일부가 아니기 때문입니다.

http://www.w3.org/TR/SVG11/struct.html#UseElement