Переместить или клонировать SVG из нижнего div в верхний div

Question

Попытка переместить div из chart_div в div здесь.

Я могу скопировать его ниже текущего svg (закомментированный код). Я также могу клонировать его, но нет простого способа нацелить его только на строку заголовка. Элемент 'g' в этом svg.

HTML

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

1008 * 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);