SVG要素の欲張りの高さを

Question

私は純粋なCSSの引数で平方根を表示しようとしています。

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

が、引数が特定のフォントサイズを持っているときにのみ動作します。私の現在の努力はここです。フォントサイズを大きくすると、平方根記号は垂直にならなくなります。ユニコードの平方根記号が引数の高さに追いつくように私は何を変更できますか？私のプロジェクトでは、平方根の議論に何があるのか​​予測できないことに注意してください。 SVG要素が引数の高さに同期したままになる方法があることを願っています。

事前に感謝します。

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

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

この

は、私はあなたのHTMLを変更する方法です

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

Answer 2

ソリューションは、あなたのSVG現在のフォントサイズに対する相対です大きさを与えることです：

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