Ist es möglich, mit Svg wie mit Glyphicon zu handeln?

Question

Ist es möglich, mit Svg wie mit Glyphicon in HTML zu handeln?

Ich meine, Inline-Svg-Skala auf aktuelle Schriftgröße zu machen und kann aktuelle Farbe/Hintergrund-Farbe verwenden?

Nachwort: es ist möglich, "Svg-Glyph" Größe mit "1em" zu manipulieren, aber bereit sein, dass 1 em ist ein wenig unzureichender Wert: es ist größer als Großbuchstaben und kleiner als Zeilenhöhe.

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>

sollte irgendwie möglich sein, von HTML-fill und Ansichtsfenster zu erben, aber ich kann, wie nicht finden.

P.S. Es sollte mit Javascript möglich sein, aber bleiben Sie ohne JavaScript-Lösung.

Answer 1

Skalierung auf aktuelle Schriftgröße ist ziemlich einfach - em-Einheiten.

Und füllen/Hub sind vererbbar CSS-Eigenschaften von Standard:

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>

Vererben Textfarbe

Ihre SVG die gleiche Farbe wie der Text, Verwendung und nutzen Sie haben der spezielle Farbwert "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>