Question

我试图在我的应用程序中的iframe上创建动态SVG覆盖。我的SVG中的线元素需要动态设置。该函数可以工作并将SVG元素添加到页面中，但其中的行不显示。当我使用检查器时，它表示行高/宽度都是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));
},

Answer 1

使用jvery和svg有一些问题。

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

与attr（）类似，jquery属性使所有属性都为小写。使用viewBox＆lt; - 时，它会被重写为视箱，对scg文档没有任何影响。

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

Jquery：创建动态SVG行

1 个答案: