将 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 放在 DIV 你只能把它放在一个 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);