Question

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

参数

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

b）使bowser / device窗口适合80％

c）但最高为800px。

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

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

svg viewBox="0 0 800 800"

关于html＆amp;视 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 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

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

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

通过浏览器/设备窗口使SVG扩展

1 个答案: