是否可以像 HTML 中的 glyphicon 一样使用 svg?
我的意思是使内联 svg 缩放到当前字体大小,并且可以使用当前颜色/背景颜色?
后记:可以用“1em”操作“svg-glyph”的大小,但要准备好 1 em 的值有点不足:它比大写字母大,比行高小。
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 继承填充和视口,但我找不到如何。
PS 应该可以使用 javascript,但不要使用 javascript 解决方案。