在窗口调整大小时自动缩放 svg答案

【问题标题】：Autoscaling an svg on window resize在窗口调整大小时自动缩放 svg
【发布时间】：2012-12-21 10:39:21
【问题描述】：

我有这个代码：

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也一样？

【问题讨论】：

标签： javascript jquery jquery-svg

【解决方案1】：

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

关于 viewBox：

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

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

【讨论】：