0

I'm trying to add a path to an SVG using jQuery, specifically something like $path = $('<path />')

The issue I'm having is that while the svg is created, the path doesn't show in the browser (Chrome). Here is an image and demo:

SVG drawn with jQuery http://codepen.io/EightArmsHQ/pen/dMNzQW

The red box is the svg, here is the relevant code (all of it is in the codepen)

var connection_css = {
    'width' : w + 'px',
    'height' : h + 'px',
    'background' : 'red',
    'position' :'absolute',
    'top' : from.top,
    'left' : from.left
  };
console.log(connection_css);
var $svg = $('<svg />', {
  'width':w,
  'height':h,
  'css' : connection_css
});
var $path = $("<path />", {
  'd':"M0 0 L0 " + h +" L"+ w +" "+h,
  'stroke':'black',
  'stroke-width' : "6",
  'fill' : 'transparent'
});

You'll see there is no line. So, the weird bit is that if I copy and paste the DOM element into the HTML, and comment out all my JavaScript

Copy dom The line

You'll see there is a glorious black line at the bottom of my box. Why isn't this showing when I append it using jQuery?

Djave
  • 8,595
  • 8
  • 70
  • 124
  • 1
    It seems jquery doesn't support append on an SVG object because it doesn't have innerHTML. also see: http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element – Puzzle84 Mar 17 '16 at 18:46
  • Good point – I think I may have even had this issue before just it was so long ago it escaped me. Looking at that other thread, it may be that d3 is the way to go! Thanks. – Djave Mar 18 '16 at 09:28

0 Answers0