0

How do you get an SVG to come to the front in Javascript? The answer is to use D3 moveToFront() or try adding a script to the html like the following:

[<script>
  d3.selectAll('circle').on('mouseenter', function() {
    this.parentElement.appendChild(this);
  });
</script>][2]

However, I try to get the SVG to show it never works. Now I know the SVG element is created because it appears in developer mode on the click event, . It is also the last element on that list. Thank you.

Here's a Fiddle, so you can see what I'm talking about. https://jsfiddle.net/Math8Gr/fzpqdkwg/

This is the code in question:

  $('div.cell').click(function() {
  //create SVG
  var point = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  //set attributes
  point.setAttribute('cx', 100);
  point.setAttribute('cy', 75);
  point.setAttribute('r', 8);
  point.setAttribute('fill', 'red');
  //Add to parent node
  document.getElementById('grid').appendChild(point, function() {
    var sel = d3.select(point);
    sel.moveToFront();
  });
mister
  • 37
  • 7
  • You combine there svg elements with regular html elements... are you sure you know what you are doing? – Dekel Aug 06 '17 at 21:12
  • I have no clue, I learned to code with a few crash courses from Codecademy. – mister Aug 06 '17 at 21:19
  • I'm sure that even at Codecademy they teach that SVG elements should go inside `...` container :) – Dekel Aug 06 '17 at 21:20
  • I guess i'll stick to the back of cereal boxes then lol. Usually, I try to figure things out with a couple of searches here. When that doesn't work, I try random "stuff" and then create a post. – mister Aug 06 '17 at 21:22
  • I tried changing the tags to and , no luck. – mister Aug 06 '17 at 21:29
  • I'm not sure which tags you changed, but the entire structure is wrong. You can't put `
    ` inside your ``, and you can't put `` inside `
    `...
     – Dekel Aug 06 '17 at 21:30
  • Okay, then append SVG directly to the document: document.parentElement.appendChild(point); – mister Aug 06 '17 at 21:42

0 Answers0