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

Question

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

参数

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

b) 将 Bowser/设备窗口调整至 80%

c) 但最大为 800px。

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%}

（来自； 如何缩放 SVG 图像以填充浏览器窗口？）

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

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

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

SVG 文件是否使用 <img>、<object> 或 <embed>？

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

（我发现 SVG 作为 CSS 背景似乎像素化）

Answer 1

缩放对象将不起作用。您必须获取 svg 元素的引用。

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

现在变量中有 svg 元素svgRoot。因此，计算你的比例值如下：

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 组件。