Question

是否可以像使用HTML中的glyphicon一样使用svg？

我的意思是将内联svg缩放到当前字体大小，并且可能使用当前颜色/背景颜色？

后记：可以操纵＆＃34; svg-glyph＆＃34;大小与＆＃34; 1em＆＃34;但要准备好1 em有点不合适的价值：它比大写字母大，然后小于行高。

＆＃13;

span { 
  fill:gold;
  font-size:24px;
  color: green;
  background-color: Lavender;
}

span > svg { 
   display:inline-block;

   width:1em;  
}

＆＃13;

<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>

＆＃13;

应该可以从html继承fill和viewport，但我无法找到。

P.S。应该可以使用javascript，但不要使用javascript解决方案。

Answer 1

缩放到当前的font-size非常简单 - em units。

默认情况下，填充/描边是可继承的CSS属性：

＆＃13;

span { 
  fill:gold;
  font-size:24px;
}

span > svg { 
   display:inline-block;
   vertical-align:middle;
   width:1em;  
}

＆＃13;

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

＆＃13;

继承文字颜色

要让SVG使用与文本相同的颜色，请使用特殊颜色值＆＃34; currentColor＆＃34;。

＆＃13;

span { 
  color:gold;
  font-size:24px;
}

span > svg { 
   height:1em;  
}

＆＃13;

<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>

＆＃13;

是否可以像使用glyphicon一样使用svg？

1 个答案: