像glyphicon一樣可以使用svg嗎？

Question

是否可以使用svg與HTML中的圖形一起使用？

我的意思是內聯SVG縮放到當前的字體大小，並可能使用當前的顏色/背景顏色？

後記：可以用「1em」操作「svg-glyph」尺寸，但要準備好1em有點不足的價值：它大於大寫字母，小於線高。

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.S.它應該可以使用JavaScript，但不要停留在JavaScript解決方案中。

Answer 1

縮放到當前字體大小非常簡單 - em單位。

，並填寫/行程是可繼承的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>