Question

我正在动态生成一些SVG。我想要做的是将页面分成两半（无论大小是多少），并且能够在屏幕左侧插入一些对象，在屏幕右侧插入一些对象。我似乎无法做对。我实际上尝试过很多不同的方法，这里列出的代码是我最近的尝试：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%">
  <script type="text/ecmascript">
    var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
   var i = 0;
  function makeBox() {
     i++;
      var newRect = document.createElementNS(svgNS,"rect");

     newRect.setAttributeNS(null,"width", 100); 

     newRect.setAttributeNS(null,"height", 100);
     newRect.setAttributeNS(null, "x", 10);
     newRect.setAttributeNS(null, "y", i * 100);
     newRect.setAttributeNS(null,"fill","blue");      


     if(i % 2 === 1) {
     document.getElementById("screenLeft").appendChild(newRect);
      } else {

     document.getElementById("screenRight").appendChild(newRect);

      }
  }


</script>
  <g id="firstGroup">
<text x="20" y="30" onclick="makeBox()" font-size="+13px">Click this text to Draw a Box.</text>
</g>
<svg id="screenLeft" viewBox="50% 100%">
</svg>
<svg id="screenRight" viewBox="50% 100%" x="50%">
</svg>  

</svg>

当然，我更改了一堆代码，使这篇文章更加简洁。它的作用是，当用户点击文本时，它会在元素“screenLeft”或“screenRight”中绘制一个矩形，具体取决于增量（i）是偶数还是奇数。

我现在有了viewBox设置的方式。如果我将铬窗口缩小到更小的尺寸，“leftSide”和“rightSide”之间的间隙会变小。但是，如果我将窗口最大化，则屏幕区域太大了。我必须向右滚动才能看到“rightSide”。它大约是我的屏幕尺寸的两倍。

我还尝试了其他一些方法，包括分组。

所以，我想我的问题是，将屏幕分成两半的最佳方法是什么，这样我就可以在屏幕的左侧生成一些对象，在屏幕的右侧生成一些对象，同时允许整个屏幕大小不同？

Answer 1

为<svg>元素viewBox添加固定宽度和异常高度。然后指定preserveAspectRatio属性，其值为xMidYMid slice。

这将确保SVG视口的整个宽度始终覆盖视图框，因此视图框的一半将覆盖屏幕的一半。

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-100 -1000 200 2000" preserveAspectRatio="xMidYMid slice">
  <style type="text/css"><![CDATA[
    rect { stroke:red }
    text { text-anchor:middle; font-size:8px }
  ]]></style>
  <rect x="-100" y="-1000" width="100" height="2000" fill="lightblue" />
  <rect x="0"    y="-1000" width="100" height="2000" fill="yellow"    />
  <text x="-50" y="0">Left Side</text>
  <text x="+50" y="0">Right Side</text>
</svg>

现场直播：http://phrogz.net/svg/half-width.svg

这个唯一的缺点（我不知道这对你来说重要）是调整浏览器窗口的大小会调整元素的大小。也许你希望元素在屏幕上始终保持相同的大小，无论浏览器有多大？

Answer 2

这似乎做了我认为你想要的，你唯一需要决定的是你想要宽高比如何影响你的显示...我故意不调整右侧的宽高比，这样你就可以看出差异。< / p>

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

<svg width="50%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/>
</svg>

<svg x="50%" width="50%"  viewBox="0 0 100 100" >
    <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
    <rect x="80%" y="10%" width="10%" height="50%" fill="green"/>
    <rect x="10" y="10" width="70" height="40" fill="gray"/>
</svg>

在页面的左侧或右侧显示SVG对象

2 个答案: