Как заставить элемент SVG растягиваться вертикально вправо?

Question

Моя проблема взята в следующей скрипте: https://jsfiddle.net/byer5pfq/ Я пытаюсь реализовать рендеринг математических выражений с чистым html/css, и мне нужно, чтобы квадратный корень растягивался вертикально в зависимости от аргумента - поэтому я прибегал к SVG для авто -растягивающий. Однако, когда аргумент квадратного корня не достаточно высок, SVG все еще растягивается до 150 пикселей (Why does 100% equal 150 pixels?). Я использую таблицу, потому что макет таблицы обычно позволяет вам соответствовать высотам контента.

Любые предложения о том, как достичь нашей цели, будем очень благодарны!

<span class="equation" style="display:inline"> 
    <table class="root" cellspacing="0"> 
    <tr> 
      <td> 
       <svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none"> 
        <text x="0" y="6.5" font-size="9px">&#8730;</text> 
       </svg> 
      </td> 
      <td> 
       <span class="root-argument"> 
        <span class="variables">Ax</span> 
       </span> 
      </td> 
    </tr> 
    </table> 
</span> 

.equation { 
    font-size: 30px; 
} 

svg { 
    display: inline-block; 
} 

span.variables { 
    vertical-align: middle; 
} 

span { 
    display: inline-block; 
    vertical-align: middle; 
} 

tr { 
    margin: 0; 
    padding: 0; 
} 

td { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
} 

span.root-exponent { 
    height: calc(70% + .6em); 
    font-size: .6em; 
    vertical-align: bottom; 
    text-align: right; 
    margin-right: -1em; 
    width: 1em; 
} 

table.root { 
    /* position: relative; */ 
    display: inline-block; 
    vertical-align: middle; 
    border: 0; 
    border-spacing: 0; 
    border-collapse: collapse; 
} 

svg.root-symbol { 
    vertical-align: middle; 
    width: .9em; 
    height: 100%; /* Need it to strech when .root-argument is tall!!! */ 
} 

span.root-argument { 
    margin-left: -1px; 
    padding-top: .05em; 
    /* Clearance for the bar */ 
    padding-left: .1em; 
    /* A little space on the left */ 
    padding-right: .2em; 
    /* A little more on the right */ 
    border-top: 0.073em solid black; 
    /* that's the bar */ 
    height: 100%; 
} 

Answer 1

По той же причине, что и ваш другой вопрос.

Вы указали, что SVG должен быть 100% высоты. Это означает, что на 100% высота его родителя. В вашем примере это <td>. Но <td> не имеет явной высоты. Он достигает своего роста от своих детей.

Таким образом, поскольку высота не может быть определена, SVG по умолчанию имеет встроенную высоту по умолчанию 150 пикселей. Таким образом, <td> получает эту высоту.

Если вы хотите использовать «100%» для высоты, то родитель SVG должен иметь определенную высоту (например, td { height: 30px; }) или иным образом ограничен некоторыми другими факторами.

Update

Одним из способов решения этой проблемы является установка контейнера в SVG (то есть. «Корень») использовать относительное позиционирование. Затем, если вы установите SVG для использования абсолютного позиционирования, элемент «root-argument» будет контролировать высоту контейнера. Затем вы можете безопасно установить SVG на высоту 100%.

.equation { 
 
    font-size: 30px; 
 
} 
 

 
svg { 
 
    display: inline-block; 
 
} 
 

 
.root { 
 
    position: relative; 
 
} 
 

 
svg.root-symbol { 
 
    position: absolute; 
 
    width: .9em; 
 
    height: 100%; /* Need it to strech when .root-argument is tall!!! */ 
 
} 
 

 
.root-argument { 
 
    display: inline-block; 
 
    margin-left: 0.9em; /* leave space for the absolutely positioned SVG */ 
 
    
 
    padding-top: .05em; 
 
    /* Clearance for the bar */ 
 
    padding-left: .1em; 
 
    /* A little space on the left */ 
 
    padding-right: .2em; 
 
    /* A little more on the right */ 
 
    border-top: 0.073em solid black; 
 
    /* that's the bar */ 
 
}

<div class="equation"> 
 
    <div class="root"> 
 
    <svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none"> 
 
     <text x="0" y="6.5" font-size="9px">&#8730;</text> 
 
    </svg> 
 
    <div class="root-argument"> 
 
     <span class="variables">Ax</span> 
 
     <br/> 
 
     <span class="variables">Bx</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Современные браузеры могут использовать MathJax, MathML или AsciiMath, минуя головной боли CSS & JS манипуляции. Уравнения может нарисовать чисто в SVG, но смешать его с HTML не рекомендуется (форматирование слишком сложное!).

Ниже приведен пример MathJax, встроенный в ваш стол, но без форматирования CSS. Очень читаемый, легко редактируемый и поддерживаемый большим количеством browsers.

<script type="text/javascript" async 
 
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"> 
 
</script> 
 

 
<span class="equation" style="display:inline"> 
 
    <table class="root" cellspacing="0"> 
 
    <tr> 
 
\t \t <td> 
 

 
\t \t </td> 
 
\t \t \t <td> 
 
\t \t \t <span class="root-argument"> 
 
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> 
 
    <mi>x</mi> <mo>=</mo> 
 

 
     <mo>&#x00B1;</mo> <!-- plus-minus sign --> 
 
     <msqrt> 
 
      <msup><mi>b</mi><mn>2</mn></msup> 
 
      <mo>&#x2212;</mo> <!-- long-dash --> 
 
      <mn>4</mn><mi>a</mi><mi>c</mi> 
 
     </msqrt> 
 

 

 
</math> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    </table>