自动缩放svg的窗口大小

Autoscaling an svg on window resize

本文关键字：窗口大小 svg 缩放      更新时间：2023-09-26

我有这样的代码:

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();
    });
});

我如何得到svgCanvasHeight在drawSvg动态以便当窗口被调整大小，所以svg的viewBox和svg?

此处回答:获取SVG/G元素的实际尺寸

关于viewBox:

我在使用SVG和jQuery时有很多问题。

虽然html属性是不区分大小写的svg属性(如viewBox)不是。我会尝试使用元素。setAttribute(name, value)原生JS函数。这对我来说很有效，并确保你使用的是大写b的viewBox

相关文章：