Jquery: create dynamic SVG lines

Question

I'm trying to create a dynamic SVG overlay over an iframe in my application. The line elements within my SVG need to be dynamically set. The function works and does add the SVG element to the page, but the lines within it do not show. When I use the inspector it says the line height / width is both 0px.

Normal html appears to work which leads me to a problem in my script?

 _createGridOverlay: function () {
    var svg = $('<svg>').attr({id: 'ppGrid', xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink"});
    var ll = $('<line>').attr({x1: 500, y1: 0, x2: 500, y2: 500}).css({"stroke": "#000", "stroke-width": "2px"});
    var rl = $('<line>').attr({x1: "1000", y1: "0", x2: "1000", y2: "1000"}).css({"stroke": "#000", "stroke-width": "2px"});
    svg.append(ll);
    svg.append(rl);
    $(ppApp.config.editorContainer).append($(svg));
},

Persijn · Accepted Answer · 2015-12-15 14:10:19Z

There are some problem with using jquery with svg.

My best suggestion is to use javascript and not jquery for manipulating svg.

Like the attr() jquery attribute makes all attributes lowercase. When using a viewBox <- this gets rewritten as viewbox and does not have any effect on the scg document.

$(document).ready(function() {
  /*var svg = $('<svg>').attr({
    id: 'ppGrid',
    xmlns: "http://www.w3.org/2000/svg",
    "xmlns:xlink": "http://www.w3.org/1999/xlink"
  });*/

  var NS = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(NS, "svg");
  $(svg).attr({
    id: 'ppGrid',
    "xmlns:xlink": "http://www.w3.org/1999/xlink",

  });
  svg.setAttribute("viewBox", "0 0 1000 1000");

  var ll = document.createElementNS(NS, "line")
  $(ll).attr({
    x1: 500,
    y1: 0,
    x2: 500,
    y2: 500
  }).css({
    "stroke": "blue",
    "stroke-width": "15px"
  });
  var rl = document.createElementNS(NS, "line")
  $(rl).attr({
    x1: "1000",
    y1: "0",
    x2: "1000",
    y2: "1000"
  }).css({
    "stroke": "#000",
    "stroke-width": "2px"
  });
  $(svg).append(ll);
  $(svg).append(rl);
  document.body.appendChild(svg);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Jquery: create dynamic SVG lines

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related