Можно ли действовать с svg как с глификоном?

Question

Можно ли действовать с svg как с глификоном в HTML?

Я хочу сделать встроенную шкалу svg текущим шрифтом и может использовать текущий цвет/фоновый цвет?

Послесловие: можно манипулировать «SVG-глифы» размер с «1em», но будьте готовы, что 1 ет немного неадекватное значение: оно больше, то буква и меньше, чем высота строки.

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>