在窗口上自动调整svg调整大小

时间:2013-01-07 16:51:41

标签: javascript jquery jquery-svg

我有这段代码:

function myClient() {
  if (!(this instanceof arguments.callee)) {
    return new arguments.callee(arguments);
  }
  var self = this;

  this.init = function() {
    self.viewResized();
    self.drawSvg();
  };

  this.viewResized = function () {
      var width = $('body').width(),
          windowHeight = $(window).height(),
          svgCanvasHeight = width * (369.0 / 567.0);
          $('#svg').css({
            'margin-top': 10
          });
    }

  this.drawSvg = function() {

    // ...
}

var myClient;

jQuery(function() {
  myClient = new myClient();
  $(window).resize(function() {
      console.log("window resized");
      myClient.viewResized();
    });
});

如何动态获取drawSvg中的svgCanvasHeight,以便在调整窗口大小时,svg的viewBox和svg也是如此?

1 个答案:

答案 0 :(得分:0)

在这里回答:Get the real size of a SVG/G element

关于viewBox:

我在SVG和jQuery方面遇到了很多问题。

虽然html属性不区分大小写,但svg属性(如viewBox)却不是。我尝试使用element.setAttribute(name,value)本机JS函数。这对我有用,并确保你使用带有大写字母B的viewBox。