使用javascript

Question

我正在尝试使用Javascript创建三个SVG圈，其中所有圈的中心点将放置在浏览器的中心。我可以使用Javascript中的window.innerWidth属性计算任何浏览器的中心点，但问题是圆圈的中心不符合浏览器的中心。计算浏览器大小的主要目的是使用

将圆圈放在中心

function draw_circle() {
  var demo = SVG('circle_1');
  var w = window.innerWidth;
  var h = window.innerHeight;
  
  var x1 = w/3.2;
  var y1 = h/6.2;
  
  var x2 = w/2.85;
  var y2 = h/3.95;
  
  var x3 = w/2.1;
  var y3 = h/2;
  
  demo
    .circle(500)
    .attr({ fill: '#fafafa ' })
    .stroke({ width: 3 })
    .x(x1).y(y1)
  ;
  
  demo
    .circle(395)
    .attr({ fill: '#fafafa ' })
    .stroke({ width: 3 })
    .x(x2)
    .y(y2)
  ;
  
  demo
    .circle(50)
    .attr({ fill: '#fafafa ' })
    .stroke({ width: 3 })
    .x(x3)
    .y(y3)
  ;
}

document
  .addEventListener('DOMContentLoaded', draw_circle)
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.6/svg.min.js"></script>

<div id="circle_1"></div>

预期输出屏幕截图相同比例：

请帮帮我。

Answer 1

circle.size / 2是必要的，因为元素的来源是top-left vertex。

function DrawCirclesCtrl() {
  var svg = SVG('Circles');
  
  var width = window.innerWidth;
  var height = window.innerHeight;
  
  var x = window.innerWidth / 2 ;
  var y = window.innerHeight / 2 ;
  
  var circles = [
    { 
      size: x / 2, bg: '#fafafa', borderSize: 3
    },
    { 
      size: x / 2.5, bg: '#fafafa', borderSize: 3
    },
    { 
      size: x / 5, bg: '#fafafa', borderSize: 3
    }
  ]
  .map(function(circle) {

    return svg
      .circle(circle.size)
      .attr({ fill: circle.bg })
      .stroke({ width: circle.borderSize })
      .x(x - (circle.size / 2))
      .y(y - (circle.size / 2))
    ;
  });
  
}

document
  .addEventListener('DOMContentLoaded', DrawCirclesCtrl)
;

#Circles {
  height: 100vh;
  width: 100vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.6/svg.min.js"></script>


<div id="Circles"></div>