Jquery：创建动态SVG行

我正在尝试在我的应用程序中的iframe上创建一个动态SVG覆盖。我的SVG中的行元素需要动态设置。该函数可以工作并向页面添加SVG元素，但其中的行不会显示。当我使用inspector时，它显示线条高度/宽度均为0px

正常的html似乎可以工作，这会导致我的脚本出现问题吗

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

\u createGridOverlay:函数（）{
var svg=$（''）.attr（{id:'ppGrid'，xmlns:'http://www.w3.org/2000/svg，“xmlns:xlink”：http://www.w3.org/1999/xlink"});
var ll=$（''）.attr（{x1:500，y1:0，x2:500，y2:500}）.css（{“笔划”：“#000”，“笔划宽度”：“2px}）；
var rl=$（''）.attr（{x1:“1000”，y1:“0”，x2:“1000”，y2:“1000”}）.css（{“笔划”：“#000”，“笔划宽度”：“2px”}）；
追加（ll）；
svg.append（rl）；
$（ppApp.config.editorContainer）.append（$（svg））；
},

将jquery与svg结合使用会出现一些问题

我的最佳建议是使用javascript而不是jquery来操作svg

与attr（）类似，jquery属性使所有属性都小写。使用viewBox时