javascript - 将 svg 从较低的 div 移动或克隆到顶部的 div

Question

尝试将一个 div 从 chart_div 移动到 movehere div。

我可以在当前 svg(注释代码)下方复制它。我也可以克隆它，但没有简单的方法专门针对标题行。该 svg 中的“g”元素。

html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><div id="movehere"><div id="chart_div"></div></div>

JavaScript

function afterDraw() {
    var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
    document.getElementsByTagName("svg")[0].parentNode.style.top = '40px';
    document.getElementsByTagName("svg")[0].style.overflow = 'visible';
    var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 15;
    g.setAttribute('transform','translate(0,-'+height+')');
  g.setAttribute('transform','translate(0,-'+height+')');

  //var NewG=g.cloneNode(true)
 // var move="translate("+0+","+50+")"
//  NewG.setAttributeNS(null,"transform",move)
//  g.appendChild(NewG)

   $('#chart_div svg').clone().appendTo($('#movehere'))
    g = null;
  }

举个例子: https://codepen.io/anon/pen/jJzxzj

谢谢!

Answer 1

看看这支笔:https://codepen.io/jormaturkenburg-the-typescripter/pen/QoVzBq

• 我用笔清理了你的 HTML。
• 暂时注释掉 CSS。
• 添加了一个 SVG 元素以将 g(组)移动到，您不能将 SVG 放在 aDIV 只能放在 SVG 元素中。
• 向 g 添加了一个翻译，因为该组中的元素使用绝对坐标定位，并且绘制得非常低，因此在较小的 SVG 元素中不可见。

    // The g you want has no id or class attached so selecting with
    // jQuery's n-th child selector was the easiest way to get it
    let group = $("#chart_div svg g:nth-child(3)");
    // Like I mention in my answer you need to attach the g to an SVG element, which I added to your div
    let targetSVG = $("#movehere svg");
    // To show the text you need to translate the group up by about 400 px
    group.clone().attr('transform', `translate(0 -400)`).appendTo(targetSVG);