Question

最近发现了Snap.svg。正在关注YouTube上的教程。出于某种原因，我的视口非常有限。有谁知道为什么会这样？ Chrome是我的浏览器，所以我怀疑这是问题所在。

var s = Snap('#svg')
var myCircle = s.circle(150,150,100)
myCircle.attr({
  fill:'#f00',
  stroke:'#000',
  strokeWidth:2
});
var aLoop = function(r){
  var newR = r===50 ? 100 : 50
  myCircle.animate({r:r}, 1500, function () {
    aLoop(newR)
  })
}

myCircle.drag()
aLoop(50)

<html>
  <head>
    <title>snap.svg</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
  </head>

  <body>
    <svg id="svg"></svg>
  </body>
</html>

无论如何，让我知道你们的想法。目标是能够在整个浏览器窗口中移动动画圆圈。谢谢:)）

Answer 1

只需在CSS中设置绘图的大小：

html, body {
  width: 100%;
  height: 100%;
}
#svg {
  width: 100%;
  height: 100%;
}

或者，如果你想轻松地想要整个窗口

#svg {
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
}

Snap.svg有限视口

1 个答案: