ブラウザウィンドウの幅全体にインラインSVGを埋めたいと思っています。 SVGはviewBoxの外にいくつかのコンテンツを持っています。これは、SVGファイルです：私は100％に幅を設定するとどうなりますhttp://pastebin.com/F5irDNaiSVGは、ブラウザウィンドウ全体を塗りつぶしたときにviewBoxの外にあるコンテンツを表示します。
はビューボックスの外側の内容が見えてしまうことです。
svg {
width: 100%;
}
このjsfiddleを参照してください：https://jsfiddle.net/3w2hy8kv/1/ 赤い長方形でありますviewBoxの境界です。
私が望むのは、viewBox外のコンテンツを表示せずに、SVGのviewBox全体をブラウザウィンドウに水平に配置することです。それは可能ですか？
@RuskinとSVG viewbox showing showing off-screen itemsのおかげで、正しい方向に私を得ました。
属性は、SVG要素に追加：
preserveAspectRatio="xMidYMin slice"
また、JavaScriptでこの属性を追加することで動作します。
CSS：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#theSVG svg {
width: 100%;
height: 100%;
}
更新フィドルを参照してください：https://jsfiddle.net/74cc07m1/1/
EDIT： フィドルが最適化SVGで更新：https://jsfiddle.net/74cc07m1/2/
恐ろしい...今すぐhttps://jakearchibald.github.io/svgomg/ – Ruskin
でsvgを最適化してください。編集を参照してください。 –
ないのオーバーフロー：隠されました;作業？ –
いいえ、私はそれを親要素、ボディ、およびsvg自体で試しましたが、viewBoxの外側にコンテンツを隠さない。 幅がviewBoxより大きい場合は常に、viewBox外のコンテンツが表示されます。 –
preserveAspectRatio属性を調べる必要があります。また、divに境界線を置いて、どこに行くのか確認してみてください。探すべき他のもの：あなたのsvgを最適化するsvgomg、preserveAspectRatioのsara souedanの記事。あなたが望むものに最も近い私は 'preserveAspectRatio =" xMinYMid slice "をsvg要素に持っています – Ruskin