ブラウザ/デバイスウィンドウでSVGを拡大する

Question

目的 ブラウザウィンドウで拡大縮小したいSVGがあります。

パラメータ

A）それはそれが80％

Cにクッパ/デバイスのウィンドウに合わせて、ここでの比率（四角）

B）です維持することである）。しかし800ピクセルの最大に。

D）私はjavascriptのソリューション

コード今のところ（私は多くの組み合わせを試してみたが） SVGのルート要素、保存アスペクト比がデフォルトに残されている

svg viewBox="0 0 800 800" 

に興味がないんだけど

と&ビューポート HTML（オブジェクトと埋め込み）

object type="image/svg+xml" id="svgobject" data="question0final.svg" 

をHTMLにに関してCSSなど、試したことがあります。

#svgobject{ position:absolute; top:0; left:0; height:100%; width:100%} 

（From; How to scale SVG image to fill browser window?）

#svgobject{width:80%; max-width:800px; margin-right: auto; margin-left: auto;} 

が、私は良いリソースの数を読んだが、私は私のエラーが出て動作することはできません

はFYIここで私はSVGのpositiioningに見つけたより良いリンクをいくつか紹介します

Do I use <img>, <object>, or <embed> for SVG files?

http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html

http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii

http://www.w3.org/TR/SVG/coords.html

http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

https://developer.mozilla.org/en/CSS/Scaling_of_SVG_backgrounds

（私はCSSのbackgoundとしてSVGsがピクセル化するように見えることを見つける。）

Answer 1

オブジェクトは動作しませんスケーリング。 svg要素の参照を取得する必要があります。

var svgs1 = $('object[id ^="svgobject"]');        
var svgDoc = document.getElementById(svgs1[0].id).contentDocument; 
var svgRoot = svgDoc.documentElement; 

変数svgRootにsvg要素があります。したがって、次のようにスケール値を計算してください：

var desiredWidth=500; //this is your desired width 
var scaleVal=desiredWidth/$(window).width(); //now you have scale value 

$(svgRoot).css("-webkit-transform","scale("+scaleVal+")"); 

このように、svgコンポーネントを画面サイズに対してスケーリングすることができます。