像glyphicon一样可以使用svg吗?
问题描述:
是否可以使用svg与HTML中的图形一起使用?像glyphicon一样可以使用svg吗?
我的意思是内联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解决方案中。
答
缩放到当前字体大小非常简单 - 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>
谢谢!并感谢您使用片段的想法两次。但我没有看到填充/笔画是可继承的。你能检查我的qyestion内的片段吗?有中风不使用绿色。 –
我添加了一个显示如何将文本颜色继承到SVG的示例。 –