マスク/クロップなしでコンテナにSVGを拡大縮小する

質問

私は、様々な種類の svg パラメータを試してみましたが、この特定の SVG を拡大縮小することに何の喜びも感じられませんでした。

私は このSVG を、SVGの大きさを制御するコンテナ要素に入れようとしています。

500x309pxを目指しています。

の組み合わせは？ width , height , viewBox と preserveAspectRatio は、SVGがマスクされたり切り取られたりすることなく、これを達成するのを助けることができますか？

どのように解決するには？

1. あなたは絶対に viewBox 属性は、常に見えるようにしたいコンテンツのバウンディングボックスを記述するものです。(リンク先のファイルにはありません。追加してください)。

2. SVGをHTML要素に埋め込むには、CSS属性に position:relative (または position:absolute または position:fixed を追加してください。

3. CSS属性を設定する position:absolute を設定します。 <svg> 要素を追加し、div 内に収まるようにします。 left:0; top:0; width:100%; height:100% .)

一度 viewBox のデフォルト値が正しく設定されます。 preserveAspectRatio 属性のデフォルト値は、あなたが望むとおりになります。特に、デフォルトの xMidYMid meet はそれを意味します。

• viewBoxによって記述されたアスペクト比は、レンダリング時に保存されます。
  
  これに対して none の場合、非一様なスケーリングが可能になります。
• ビューボックスは常に meet を使用して、トップ/ボトムまたは左/右のいずれかになります。
  
  これに対して slice の値は、ビューボックスがレンダリングを完全に満たし、トップ/ボトムまたは左/右が SVG の外に落ちることを保証します。
• はviewBoxをSVGビューポート内で垂直方向と水平方向の中央に維持する。
  
  比較すると、値が xMinYMax の場合、左下隅に置かれ、パディングは右または上にのみ行われます。

このライブはこちらでご覧いただけます。 http://jsfiddle.net/Jq3gy/2/

に対して明示的な値を指定してみてください。 preserveAspectRatio に明示的に値を指定してみてください。 <svg> 要素を追加し、"Update" を押して、それらがレンダリングにどのような影響を与えるかを確認します。

編集 : 簡易版の USマップをビューボックスで表示する (ほぼ半分のバイト) を作成し、それを正確なニーズに合わせて更新したデモで使用しました。 http://jsfiddle.net/Jq3gy/5/