glyphicon과 같이 svg로 작업 할 수 있습니까?

Question

svg를 HTML의 글리프콘과 같이 사용할 수 있습니까?

현재 인라인 svg 스케일을 현재 글꼴 크기로 만들고 현재 색상/배경색을 사용할 수 있습니까?

후문 :은 행 높이 다음 대문자 후 크고 작은 : 그것은 "1em"와 "SVG-글리프"크기를 조작하지만 그들을 조금 부적절한 값이 1 것을 준비 할 수.

span { 
 
    fill:gold; 
 
    font-size:24px; 
 
    color: green; 
 
    background-color: Lavender; 
 
} 
 

 
span > svg { 
 
    display:inline-block; 
 

 
    width:1em; 
 
}

<div> 
 
<span> 
 
    1 em Baseline Align: 
 
    <svg viewBox="0 0 100 100" style="vertical-align:baseline"> 
 
    <rect height="100" width="100"  fill="none" stroke="currentColor" stroke-width="15" /> 
 
    </svg> 
 
</span> 
 
</div> 
 

 
<div> 
 
<span> 
 
1 em Text bottom Align: 
 
    <svg viewBox="0 0 100 100" style="vertical-align:text-bottom"> 
 
    <rect height="100" width="100" fill="none" stroke="currentColor" stroke-width="15" /> 
 
    </svg> 
 
</span> 
 
</div> 
 

 
<div> 
 
<span> 
 
0.75em Baseline Align: 
 
    <svg viewBox="0 0 100 100" style="vertical-align:Baseline; width:0.75em; height:0.75em;"> 
 
    <rect height="100" width="100" fill="none" stroke="currentColor" stroke-width="20" /> 
 
    </svg> 
 
</span> 
 
</div>

은 어떻게 든 HTML에서 채우기 및 뷰포트을 상속 할 수 있어야하지만 난 방법을 찾을 수 없습니다.

P. 그것은 자바 스크립트로 가능해야하지만, 자바 스크립트 솔루션과 함께있어 보자.

Answer 1

현재 글꼴 크기로의 배율은 매우 간단합니다.

및 채우기/스트로크는 기본적으로 상속 CSS 속성은 다음과 같습니다

span { 
 
    fill:gold; 
 
    font-size:24px; 
 
} 
 

 
span > svg { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    width:1em; 
 
}

<span> 
 
Text: 
 
<svg viewBox="0 0 100 100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" /> 
 
</svg> 
 
</span>

이 SVG 텍스트 사용과 같은 색상을 사용하도록하려면 텍스트 색상을

을 상속 특수한 칼라 치 「currentColor」

span { 
 
    color:gold; 
 
    font-size:24px; 
 
} 
 

 
span > svg { 
 
    height:1em; 
 
}

<span> 
 
Text: 
 
<svg viewBox="0 0 100 100"> 
 
    <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="currentColor" /> 
 
</svg> 
 
and more text 
 
</span>