大規模なコンテナ内のsvgを中心に

Question

私は、コンテナのdiv内に大きなsvgを配置し、svgのサイズを最大にし、アスペクト比を維持しようとしています。

何らかの理由で、svgが正しく表示されますが、svgが親全体に展開されたように、width属性とheight属性が正しくありません。

svgが正しいサイズになるようにするにはどうすればよいですか？

お願いします。これはCSSでのみ解決され、javascriptではありません。

また、大きな画像でsvgを置き換えると、これが機能することに注意してください。ある意味で

var info = document.getElementById('info'); 
 
var svg = document.getElementById('svg'); 
 
var box = svg.getBoundingClientRect(); 
 

 
info.textContent = 'the ratio is ' + (box.width/box.height) + ' instead of 2.5! The yellow square is not in the viewBox, so why does it show up?';

.container { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 40px; 
 
    right: 40px; 
 
    bottom: 40px; 
 
} 
 

 
.svg { 
 
    position: absolute; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color: gray; 
 
}

<div class="container"> 
 
<svg id="svg" class="svg" width="1000px" height="500px" viewBox="0 0 10 5"> 
 
    <rect width="10" height="5" fill="black" /> 
 
    <rect x="-2" y="2" width="1" height="1" fill="yellow" /> 
 
</svg> 
 
</div> 
 
<div id="info"/>

Answer 1

、あなたのSVGはすでにその容器の中にあなたはそれがしたい方法フィッティングです。実際には、定義したCSSのほとんどは中止することができます。 SVG要素はwidth: 100%, height: 100%で定義する必要があります。したがって、<svg>要素自体のコンテナと同じサイズになります。次に、viewBoxで定義された領域がpreserveAspectRatio="xMidYMid meet"の属性に従ってこのビューポートにレンダリングされます。 （暗黙的に使用される、つまりそのデフォルト値）：縦横比は保持され、内側に収まる最大サイズは中央に配置されます。

黄色RECTに伴う問題は、コンテンツがビューポート、ないビューボックスの縁にクリップされているために生じます。したがって、SVGで定義されているがviewBoxの外にあるコンテンツは引き続き表示されることがあります。

は（最初は<svg>要素にclipスタイル属性をサポートするためのアイデアがありましたが、その概念であるが、使用不可能だったこと、それが廃止されたので、複雑でした。）

最善の解決策は今にあります<svg>要素を別の<svg>で囲んでください。内側のものは幅と高さの絶対値を取得し、外側のものはviewBoxと同じ値を取得し、width: 100%, height: 100%となります。

ご覧のとおり、内側のsvgはコンテンツの端をクリップし、外側のコンテンツはコンテナーに収まります。

CSS background-colorを内側のsvgに定義することはできません。これはHTMLに対してのみ定義され、HTML要素の直接の子であるため、外側のものでのみ動作します。色付きの背景が必要な場合は、適切なfillでviewBoxの領域をカバーする矩形を定義します。 cover`：

.container { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 40px; 
 
    right: 40px; 
 
    bottom: 40px; 
 
} 
 

 
#svg1 { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: gray; /* clipped at the borders of the container! */ 
 
}

<div class="container"> 
 
    <svg id="svg1" class="svg" viewBox="0 0 10 5"> 
 
    <svg id="svg2" width="10" height="5"> 
 
     <rect width="10" height="5" fill="black" /> <!--this is your background--> 
 
     <rect x="-2" y="2" width="1" height="1" fill="yellow" /> 
 
     <ellipse cx="5" cy="2.5" rx="6" ry="3" 
 
       fill="none" stroke="blue" stroke-width="0.2" /> 
 
    </svg> 
 
    </svg> 
 
</div> 
 
<div id="info"/>