CODEWITHSUNDEEP
jquerysvg
mauzilla
mauzilla

Reputation: 3592

Jquery: create dynamic SVG lines

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));
},

Upvotes: 2

Views: 2587

Answers (1)

Persijn
Persijn

Reputation: 14990

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>

Upvotes: 3

Related Questions