私は、コンテナのdiv内に大きなsvgを配置し、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"/>
https://css-tricks.com/scale-svg/ – CBroe
は、私はあなたが背景サイズ 'と同じ効果を達成したいと考えています。古いブラウザや常緑色のブラウザのみをサポートする計画がない場合は、['object-fit:cover'](https://developer.mozilla.org/en-US/docs/Web/CSS /オブジェクトフィット)。 – Terry
@テリー:いいえ私はobject-fit:containsをやろうとしています。そのことがどのように機能するのかは不明です。最大幅または最大高さを取り除くとすぐに、svgが大きくなりすぎます –