삽입하고 나는 <code><use></code> 방법을 통해 삽입 할 수있는 SVG의 spritesheet를 생성하는 <a href="https://github.com/jkphl/svg-sprite" rel="nofollow noreferrer">svg-sprite</a>을 사용하고

spritesheet에서 SVG 색상을 CSS를 사용 :삽입하고 나는 <code><use></code> 방법을 통해 삽입 할 수있는 SVG의 spritesheet를 생성하는 <a href="https://github.com/jkphl/svg-sprite" rel="nofollow noreferrer">svg-sprite</a>을 사용하고

<svg class="icon"> 
    <use xlink:href="/assets/icons.svg#phone"/> 
</svg>

이 HTML 마크 업을 통해 아이콘을 삽입하고 스타일을 위해 잘 작동 .

그러나 CSS를 통해 아이콘을 삽입하는 옵션도 필요합니다. 예를 들어 CMS WYSIWYG 편집기를 통해 컨텐츠 목록을 추가하는 경우 컨텐츠 편집기가 추가 SVG 요소를 추가하지 않아도됩니다. 예를 들어

<ul class="icon-list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
</ul> 

.icon-list li::before { /* icon here */ }

<use> 삽입 방법, 또는 유사한 방법으로이를 달성하는 방법이 있는가? 이 솔루션은 또한 CSS를 통해 SVG에 색상을 지정할 수 있어야합니다.

출처

2016-11-22 Matt Stone

질문을 올바르게 이해하면 기본 대답은 '아니오'입니다.

비트 맵과 마찬가지로 SVG 아이콘을 CSS에 포함 할 수 있습니다. 예 : background-image. 그러나 브라우저 개인 정보 보호 제한으로 인해 자체 포함되어야합니다. <use>으로 외부 SVG 요소를 참조 할 수 없습니다. 또는 실제로 다른 이미지, 글꼴 등의 외부 객체도 포함됩니다.

CSS 외부에서도 스타일을 지정할 수 없습니다. 예를 들어, 같은 아이콘의 다른 색상 변형이 필요한 경우 각 색상에 대해 별도의 SVG를 만들어야합니다.

출처

2016-11-22 11:45:36

감사합니다. 슬프게도 귀하의 답변이 현재 연구 결과와 일치합니다. 나는이 문제를 정말로 인식하고있는 다른 누군가를 찾지 못했다. 나는 아이콘 글꼴을 SVG 아이콘으로 대체하려는 공통의 추진 과정에서 감독인지 아니면 아이콘이 어떻게 사용되어야하는지에 대한 나의 이해의 결함인가? –

비트 맵 스프라이트 시트처럼 SVG 파일을 사용하는 것을 방해하는 방법은 없습니다. 예. 'background-image'와'background-position'을 가지고 있습니다. 이 페이지는 도움이 될 수도 있습니다. https://betravis.github.io/icon-methods/svg-sprite-sheets.html –

사실 폴입니다.하지만 그 방법으로 아이콘 채우기 기능을 잃게됩니다. –

삽입하고 나는 <code><use></code> 방법을 통해 삽입 할 수있는 SVG의 spritesheet를 생성하는 <a href="https://github.com/jkphl/svg-sprite" rel="nofollow noreferrer">svg-sprite</a>을 사용하고

답변

관련 문제