Machen Sie ein SVG-Element mit gieriger Höhe

Question

Ich versuche, eine Quadratwurzel mit einem Argument in reinem CSS anzuzeigen. Mein aktueller Aufwand ist hier richtig:

https://jsfiddle.net/29L4ehef/62/

aber es funktioniert nur, wenn Argument eine bestimmte Schriftgröße hat. Wenn ich die Schriftgröße vergrößere, hält das Quadratwurzelsymbol nicht mehr aufrecht. Was kann ich ändern, damit die Unicode-Quadratwurzel-Symbole mit der Höhe des Arguments mithalten? Bitte beachten Sie, dass ich in meinem Projekt nicht vorhersagen kann, was im Argument der Quadratwurzel steht. Es könnte ein großer Bruch sein, usw. Ich hoffe also, dass das SVG-Element eine Möglichkeit bietet, mit der Höhe des Arguments synchron zu bleiben.

Vielen Dank im Voraus!

<span> 
    <svg width="5em" height="2em" class="symbol" class="square-root-symbol" viewBox="0 0 10 14" preserveAspectRatio="xMinYMin"> 
    <text x="0" y="14" font-size="15px">√</text> 
    </svg> 
    <span class="argument"> 
    A 
    </span> 
</span> 

.symbol { 
    height: 5em; 
    width: 3.4em; 
    margin-right: -0.4em; 
    vertical-align: middle; 
} 

.argument { 
    font-size: 4em; /* CHANGE ME - ONLY WORKS FOR 4em */ 
    border-top: .05em solid black; 
    padding-left: .15em; 
    padding-right: .25em; 
    vertical-align: middle; 
} 

Answer 1

Dies ist, wie ich Ihre HTML geändert:

<span class="symbol-container"> 
    <svg class="symbol" class="square-root-symbol" viewBox="0 0 10 14" preserveAspectRatio="xMinYMin"> 
    <text x="0" y="14" font-size="15px">√</text> 
    </svg> 
    <span class="argument"> 
    A 
    </span> 
</span> 

und CSS:

.symbol-container { 
    position: relative; 
    display: block; 
    height: 10em; 
} 

.symbol { 
    display: block; 
    float: left; 
    height: 100%; 
    width: auto; 
} 

.argument { 
    display: block; 
    float: left; 
    font-size: 10em; /* CHANGE ME - ONLY WORKS FOR 4em */ 
    border-top: 5px solid black; 
    vertical-align: top; 
    line-height: 1; 
    margin-left: -5px; 
} 

Answer 2

Die Lösung ist Ihre SVG eine Größe zu geben, die auf die aktuelle Schriftgröße relativ ist:

.equation { 
 
    font-size: 4em; 
 
} 
 

 
.symbol { 
 
    width: 0.75em; 
 
    margin-right: -0.4em; 
 
    vertical-align: middle; 
 
} 
 

 
.argument { 
 
    border-top: .05em solid black; 
 
    padding-left: .15em; 
 
    padding-right: .25em; 
 
    vertical-align: middle; 
 
}

<span class="equation"> 
 
    <svg class="symbol" class="square-root-symbol" viewBox="0 0 10 14" preserveAspectRatio="xMinYMin"> 
 
    <text x="0" y="14" font-size="15px">√</text> 
 
    </svg> 
 
    <span class="argument"> 
 
    A 
 
    </span> 
 
</span>