SVGコンテンツ - スケール幅のみとフルハイトを表示

私はforeignObjectテキストを含むSVGを作成し、imgタグを使用してHTMLページにリンクしました。SVGコンテンツ - スケール幅のみとフルハイトを表示

svgの幅はデバイスごとに調整されますが、高さは約153pxに固定されています。私はsvgの幅と高さを100％に設定しました。

私はテキスト部分をデバイスごとに応答性とスケールにしたいので、固定高さをsvgにすることはできません。

したがって、画像に高さが完全に表示されないため、foreignObjectのテキストコンテンツが途切れることがあります。

私はviewBoxとpreserveAspectRatioを失敗しました。ここ

は、私がこのような状況のいずれかの解決策のための任意のJSを使用することはできません実際の使用からJsfiddle example

<img src="http://treebliss.com/shipping.svg" style="width: 100%; height: 100%"/>

スクリーンショット

です。

私はこのファイルをhtml、body {width：100％;高さ：100％;}これを追加すると、あなたの問題が解決されます。 – Navnit

ビューポートのパーセンテージ長：

https://www.w3.org/TR/css3-values/#viewport-relative-lengths

ビューポートのパーセンテージ長は初期包含ブロックのサイズに対するものです。ブロックを含む最初のの高さまたは幅が変更されると、それに応じて拡大/縮小されます。ただし、ルート要素のオーバーフローの値がautoの場合、すべてのスクロールバーは存在しないものとみなされます。画像が入った容器にする必要があり

body { 
 
    height: 100vh; 
 
} 
 
img { 
 
    width: 100%; 
 
    height:100%; 
 
}

<img src="http://treebliss.com/shipping.svg" />

2016-11-18 08:01:57

他の回答と同様の問題：divの高さが長すぎます。他の要素に囲まれているとレイアウトを維持できません。小さなビューポートでは、高さはsvgにはあまりにも小さいので、もう一度切り取って表示されます。 –

：100％の両方のhtml/body要素の高さを設定する代わりに、あなたはまた、ビューポート-パーセントの長さを使用することができます100％の高さ（VH）

div { 
text-align: center; 
height: 100vh; 
} 
img { 
border: thin dotted darkgrey; 
width: 100%; 
height: 100%; 
}

を作成しました

2016-11-18 08:11:29 Marinus

2つの問題：divの高さが長すぎて、他の要素に囲まれているとレイアウトを維持できません。小さなビューポートでは、高さはsvgにはあまりにも小さいので、もう一度切り取って表示されます。 –

それはあなたのレイアウトの残りの部分によって決まります...しかし答えはあなたの質問には正しいです。 – Marinus

実際に私の質問は、テキスト部分が反応すると言及しました。ブラウザのサイズを変更したり、テキストが高さよりも長い場合、ビューポートソリューションは機能しません。とにかくありがとう、私はこれを調べ続けます。 –

答えて