问Snap.svg受限视口
EN

Stack Overflow用户

提问于 2016-03-14 16:36:33

回答 1查看 86关注 0票数 0

最近发现了关于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>

不管怎样，让我知道你们的想法。目标是能够在整个浏览器窗口中移动动画圆。谢谢:)

javascript

svg

snap.svg

回答 1

Stack Overflow用户

发布于 2016-03-14 17:03:43

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

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

或者，如果您想轻松地查看整个窗口

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35982797

复制

相似问题

问Snap.svg受限视口
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Snap.svg受限视口EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Snap.svg受限视口
EN