Отображение объектов SVG на левой или правой стороне страницы

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, вроде работает. Если я уменьшу размер окна Chrome до меньшего размера, зазор между «leftSide» и «rightSide» действительно уменьшится. Тем не менее, если у меня есть окно Maximized, область экрана будет слишком большой. Я должен прокрутить далеко вправо, чтобы увидеть "RightSide". Это примерно в два раза больше моего размера экрана.

Я также попробовал несколько других методов, включая группировку.

Итак, я предполагаю, что мой вопрос в том, каков наилучший способ разделить экран пополам, чтобы я мог создавать некоторые объекты на левой стороне экрана, а некоторые - на правой стороне экрана, при этом позволяя отображать весь экран размер будет отличаться?

Answer 1

Похоже, вы сделали то, что хотели, единственное, что вам нужно решить, это то, как вы хотите, чтобы соотношение сторон влияло на ваш дисплей ... Я намеренно оставил соотношение сторон правой стороны без регулировки, чтобы вы могли увидеть разницу.

<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>

Answer 2

Дайте вашему <svg> элементу viewBox с фиксированной шириной и исключительной высотой.Затем укажите атрибут preserveAspectRatio со значением xMidYMid slice.

. Это гарантирует, что полная ширина вашего SVG-окна всегда будет охватывать viewBox, а половина вашего viewBox будеттаким образом покрыть половину экрана.

<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

Единственный недостаток этого (который я не могу сказать, имеет ли это значение для вас), это изменение размераОкно браузера изменит размеры элементов.Может быть, вы хотите, чтобы элементы всегда оставались одинаковыми по размеру на экране, независимо от размера браузера?