DIVは内部SVGを認識しません

Question

<div>は、次のシナリオでは<svg>の内部の高さに自動的に拡張されません。

CSS

#curve-svg { 
    height: auto; 
    max-width: 400px; 
    position: relative; 
    border: 1px solid red; 


    svg { 
    position: absolute; 
    width: 100%; 
    max-width: 400px; 
    height: auto; 
    } 
} 

HTMLそれは何の違いになりますが、私はそれができなくなり、まだPURE.cssには何も見つかっていない場合は、PURE.cssを使用して

<div class="pure-u-1" id="curve-svg"> 
    <svg id="svg" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;"> 

    <path id="curve" style="fill:none;stroke-width:0.35px;stroke:#333;" d="blah" blah blah/> 
    </svg> 
</div> 

I 午前 divの高さが拡大しています。これはBootstrap 3とBootstrap 4の問題でもありました。

すべてのヘルプや提案は非常に高く評価されています。

Answer 1

原因は、svg要素のheight="100%"属性です。特定の高さ（たとえば、ピクセル）を指定します。それからサイズが正しくなります。 Here's an example。