将子节点移动到另一个<g>元素会弄乱设计

时间：2018-03-02 08:04:29

标签： javascript html svg

我有一个带有根节点和4个子节点的静态svg图。我想分别对子节点进行分组，但这样设计就会被分解。这是工作代码

＆＃13;
＆＃13; 
<svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
        <g id="root_node" transform="matrix(1 0 0 1 250 100)">
          <rect width="200" height="60" rx="5" ry="5">
          </rect>
          <text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
            Root Node
          </text>   
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(0, 0) rotate(-135)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(200 0) rotate(-45)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(0 60) rotate(135)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(200 60) rotate(45)" stroke="black" stroke-width="3"/>
        </g>
        <g id="child_node">
          <rect width="180" height="60" x="0" y="0" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="500" y="0" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="0" y="200" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="500" y="200" rx="5" ry="5">
          </rect>
          <text x="100" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
          <text x="600" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
          <text x="100" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
          <text x="600" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
        </g>
        <g id="edges">
          
        </g>
      </svg>
＆＃13;
＆＃13;
＆＃13;

当我将上面的代码更改为以下我想将子节点分组到一个地方的时候，我没有得到上面的设计

＆＃13;
＆＃13; 
 <svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
        <g id="root_node" transform="matrix(1 0 0 1 250 100)">
          <rect width="200" height="60" rx="5" ry="5">
          </rect>
          <text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
            Root Node
          </text>
        </g>
        <g id="child_node">
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(0, 0) rotate(-135)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(200 0) rotate(-45)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(0 60) rotate(135)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(200 60) rotate(45)" stroke="black" stroke-width="3"/>
          
          <rect width="180" height="60" x="0" y="0" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="500" y="0" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="0" y="200" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="500" y="200" rx="5" ry="5">
          </rect>
          <text x="100" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
          <text x="600" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
          <text x="100" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
          <text x="600" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
        </g>
        
      </svg>
＆＃13;
＆＃13;
＆＃13;

我想知道这背后的机制。有人可以解释一下吗？我是否必须在child_nodes组中使用转换才能使其正常工作？

2 个答案:

答案 0 :(得分：0)

Litle实验，请问是否有一些你不明白的东西， 我会通过更新来回答它。我还不能评论。抱歉我的英语不好：）

＆＃13;
＆＃13; 
<svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <!-- THIS IS THE ROOT OBJECT-->
 <!-- transform used for [scaling,rotating,translating,etc] -->
 <g id="root_node" transform="matrix(1 0 0 1 290 0)" fill="blue">
          
  <!-- THIS FOR SET OBJECT (rx & ry for set border-radius) -->
  <rect width="200" height="60" rx="5" ry="5"></rect>
  <!--  OBJECT TEXT -->
  <text x="100" y="35" font-size="14" text-anchor="middle" fill="white">Root Node</text>
 </g>
        
 <!-- THIS IS THE CHILD OBJECT-->
 <g id="child_node">
  <!-- THIS IS FOR LINE (delete if you dont want to use)
  <line x1="0" y1="0" x2="200" y2="0" transform="translate(0, 0) rotate(-135)" stroke="black" stroke-width="3"/>
  <line x1="0" y1="0" x2="100" y2="0" transform="translate(200 0) rotate(-45)" stroke="black" stroke-width="3"/>
  <line x1="0" y1="0" x2="100" y2="0" transform="translate(0 60) rotate(135)" stroke="black" stroke-width="3"/>
  <line x1="0" y1="0" x2="100" y2="0" transform="translate(200 60) rotate(45)" stroke="black" stroke-width="3"/> -->
          
  <!-- THIS FOR SET OBJECT & move position foreach child -->
  <!-- change value x or y to move object-->
  <rect width="180" height="60" x="0" y="100" rx="5" ry="5"></rect>
  <rect width="180" height="60" x="200" y="100" rx="5" ry="5"></rect>
  <rect width="180" height="60" x="400" y="100" rx="5" ry="5"></rect>
  <rect width="180" height="60" x="600" y="100" rx="5" ry="5"></rect>
  <!--  OBJECT TEXT -->
  <!-- dont forget move the text position ( x , y ) to move it into the object -->
  <text x="100" y="135" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
  <text x="300" y="135" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
  <text x="500" y="135" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
  <text x="700" y="135" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
 </g>
</svg>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在您的示例中将子注释移动到其他组会混淆输出，因为您在一个组上使用矩阵转换而不在其他组上 - 原始输出因此导致子节点＆＃39;父节点上的属性和转换（g）。

如果您从某个地方（例如Illustrator）导出SVG，则根据原始文件中的要求对节点进行分组会更容易。或者相应地摆脱变换并设置子注释。

我想在插图画家中打开SVG更容易，做必要的更改，然后再次导出，就像我做的那样获得附加的片段。

其他选项是组合矩阵变换和线的变换。基本上你的#root_node只是被翻译了（x：250px，y：100px）。在你的情况下，你只需要翻译行x + = 250＆amp; y + = 100。

＆＃13;
＆＃13; 
<svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
        <g id="root_node" transform="matrix(1 0 0 1 250 100)">
          <rect width="200" height="60" rx="5" ry="5">
          </rect>
          <text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
            Root Node
          </text>   
        </g>
        <g id="child_node">
          <rect width="180" height="60" x="0" y="0" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="500" y="0" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="0" y="200" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="500" y="200" rx="5" ry="5">
          </rect>
          <text x="100" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
          <text x="600" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
          <text x="100" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
          <text x="600" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
          <!-- option 1 -->
          <!-- use transform in lines (x1, y1) and (x2, y2) -->
          <line class="st3" x1="250" y1="100" x2="179.3" y2="29.3" stroke="black" stroke-width="3"/>
          <line class="st3" x1="450" y1="100" x2="520.7" y2="29.3" stroke="black" stroke-width="3"/>
          <line class="st3" x1="250" y1="160" x2="179.3" y2="230.7" stroke="black" stroke-width="3"/>
          <line class="st3" x1="450" y1="160" x2="520.7" y2="230.7" stroke="black" stroke-width="3"/>
          <!-- option 2 -->
          <!-- combine group transform (translate) and line's transform -->
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(250, 100) rotate(-135)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(450, 100) rotate(-45)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(250, 160) rotate(135)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(450, 160) rotate(45)" stroke="black" stroke-width="3"/>
        </g>
        <g id="edges">
          
        </g>
      </svg>
      
      <svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
        <g id="root_node" transform="matrix(1 0 0 1 250 100)">
          <rect width="200" height="60" rx="5" ry="5">
          </rect>
          <text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
            Root Node
          </text>
        </g>
        <g id="child_node">
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(250, 100) rotate(-135)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(450, 100) rotate(-45)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(250, 160) rotate(135)" stroke="black" stroke-width="3"/>
          <line x1="0" y1="0" x2="100" y2="0" transform="translate(450, 160) rotate(45)" stroke="black" stroke-width="3"/>
          
          <rect width="180" height="60" x="0" y="0" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="500" y="0" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="0" y="200" rx="5" ry="5">
          </rect>
          <rect width="180" height="60" x="500" y="200" rx="5" ry="5">
          </rect>
          <text x="100" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
          <text x="600" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
          <text x="100" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
          <text x="600" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
        </g>
        
      </svg>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题