인라인 외부 SVG

Question

CSS 채우기 속성을 사용할 수있는 소셜 미디어 링크 용 외부 SVG 이미지를 사용하고 싶습니다. HTML은 다음과 같습니다 :

<a><svg width="30" height="30"> 
    <use xlink:href="image/svg/instagram.svg" class="insta"></use> 
</svg>Instagram</a> 

그러나 SVG가 표시되지 않습니다. 또한 내 CSS는 다음과 같습니다.

.insta { 
    fill: blue; 
} 

인라인 SVG 파일을 포함시키는 방법에 대한 도움은 정말 감사하겠습니다. 웹 사이트는 here입니다.

Answer 1

당신은 상징 요소

<symbol id="item"> 
... 
</symbol> 

하고 HREF이 작동 할 수 있음을 참조 내부의 SVG 파일 요소 내부에 SVG 아이콘을 포장해야합니다.

<a><svg width="30" height="30"> 
    <use xlink:href="image/svg/instagram.svg#item" class="insta"></use> 
</svg>Instagram</a>