使用瀏覽器/設備窗口對SVG進行縮放

目標我有一個svg，我想用瀏覽器窗口進行縮放。使用瀏覽器/設備窗口對SVG進行縮放

參數

一）這是保持它的比例（這裏爲正方形）

二）加油車/設備窗口適合80％

C），但最大爲800像素。

d）我在JavaScript的解決方案

到目前爲止的代碼（雖然我已經試過許多種組合） SVG根元素，在保持縱橫比一直留到默認

svg viewBox="0 0 800 800"

不感興趣

和與問候爲HTML &視 HTML（與對象嵌入）

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

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

（我發現SVGs如CSS backgound看起來像素化）

來源

2012-03-15 Gamemorize

本身解決（所以這是我正在做的事情...） – Gamemorize 2012-03-15 15:21:44

我使用的程序很好，在#svgobject {width：80％;最大寬度：800像素; margin-right：auto; margin-left：auto;}爲我的CSS。道歉。至少我提出了一些好的鏈接！ – Gamemorize 2012-03-15 15:23:11

這不適合我。看起來SVG元素是尊重width/max-width屬性的，但SVG內部的元素只是被切斷了，而不是放大/縮小。 – 2012-06-13 14:10:43

縮放對象將不能正常工作。你必須得到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組件。

來源

2013-01-03 07:20:16

使用瀏覽器/設備窗口對SVG進行縮放

回答

相關問題