Question

我正在尝试根据浏览器窗口制作一个可以适合和重新缩放的偏移矩形。我对javascripting和SVG很新，所以也许这里的人有更多的知识。

这是我一直想弄清楚的代码的Codepen。如您所见，矩形表现不正常。非常感谢我能得到的所有提示。

HTML

<div id="wrapper">
</div>

的Javascript

var draw = SVG('wrapper').size(100, 100)
var rect = draw.rect(100, 100).move(30, 30).attr({ stroke: '#f06', fill: 'none' })

CSS

#wrapper {

  width: 100vw;
  height: 100vh;

}

svg {

  width: 100vw;
  height: 100vh;

}

rect {

  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;

}

Answer 1

您需要考虑rect在x和y上移动30px，因此您必须减小其大小，并使用vh和vw单位。您也可以删除空格以避免滚动条：

＆＃13;

var draw = SVG('wrapper').size(100, 100)
var rect = draw.rect(100, 100).move(30, 30).attr({
  stroke: '#f06',
  fill: 'none'
})

＆＃13;

body {
  margin: 0; /*Don't forget this*/
  font-size:0; /*remove white space*/
}

/*
useless
#wrapper {
  width: 100vw;
  height: 100vh;
}
*/

svg {
  width: 100vw;
  height: 100vh;
}

rect {
  width: calc(100vw - 60px); /* we remove 60px to keep the same offset (30px) on both sides*/
  height: calc(100vh - 60px);
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<div id="wrapper">
</div>

＆＃13;

<强>更新

上述解决方案似乎只适用于chrome，所以这里还有另一个支持：

＆＃13;

var draw = SVG('wrapper').size(100, 100)
var rect = draw.rect($(window).width() - 60, $(window).height() - 60).move(30, 30).attr({
  stroke: '#f06',
  fill: 'none'
})
$(window).resize(function() {
  $('svg rect').attr('height', $(window).height() - 60);
  $('svg rect').attr('width', $(window).width() - 60);
})

＆＃13;

body {
  margin: 0;/*Don't forget this*/
  font-size: 0;/*remove white space*/
}


svg {
  width: 100vw;
  height: 100vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<div id="wrapper">
</div>

＆＃13;

SVG.JS响应式矩形，100vw和100vh

1 个答案: