使用浏览器/设备窗口缩放SVG

客观的 我有一个svg，我想在浏览器窗口中进行缩放

参数

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

b） 将bowser/设备窗口安装到80%

c） 但最高可达800像素

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

迄今为止的代码（尽管我已经尝试了许多组合） SVG根元素，保留纵横比已保留为默认值

svg viewBox="0 0 800 800"

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

CSS，尝试过的东西，还有其他

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

（来源：； )

我已经阅读了很多很好的参考资料，但是我不能找出我的错误

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

---

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

缩放对象不起作用。您必须获取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组件。

自行解决（所以这是我正在做的事情…）我使用的过程很好，确定了我的css的#svgobject{width:80%；max width:800px；margin right:auto；margin left:auto；}。道歉。至少我放了一些好的链接！这对我没用。SVG元素似乎与宽度/最大宽度属性有关，但SVG中的元素只是被切断，而不是放大/缩小。@josiah sprague检查您的视图框是否足够大以容纳图像。

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

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

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