让 SVG 随浏览器/设备窗口缩放答案

【问题标题】：Getting SVG to scale with browser/device window让 SVG 随浏览器/设备窗口缩放
【发布时间】：2012-04-01 00:03:06
【问题描述】：

目标我有一个 svg，我想用浏览器窗口进行缩放。

参数

a) 保持比例（这里是正方形）

b)使 Bowser/设备窗口适合 80%

c)但最大为 800 像素。

d) 我对 javascript 解决方案不感兴趣

到目前为止的代码（虽然我尝试了很多组合） SVG 根元素，保留纵横比保持默认

svg viewBox="0 0 800 800"

关于 html 和 viewport HTML（嵌入对象）

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

CSS，尝试过的东西，等等……

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

(来自; How to scale SVG image to fill browser window?)

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

我已经阅读了许多好的资源，但我无法解决我的错误

仅供参考，这是我在 SVG 定位上找到的一些更好的链接

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 背景的 SVG 似乎像素化了）

【问题讨论】：

自行解决（所以这是我正在做的事情......）
我使用的程序很好，选择#svgobject{width:80%;最大宽度：800px；边距右：自动； margin-left: auto;} 用于我的 CSS。道歉。至少我提供了一些好的链接！
这对我不起作用。似乎 SVG 元素尊重 width/max-width 属性，但 SVG 内的元素只是被截断，而不是放大/缩小。
@josiah sprague 检查你的 viewBox 是否足够大。

标签： svg

【解决方案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 组件。

【讨论】：