fügen Sie eine neue Zeile in der svg -, Fehler kann nicht sehen, die Zeile

Möchte ich hinzufügen, dass eine neue Zeile in der svg
wenn Sie die add-Taste gedrückt wird, wird eine neue Zeile Hinzugefügt werden soll in das svg
Ich kann sicher, dass die Zeile Hinzugefügt, in den Elementen, aber warum ist es nicht auf dem Bildschirm angezeigt?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#map
{
    border:1px solid #000;
}
line
{
    stroke:rgb(0,0,0);
    stroke-width:3;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    $("#add").click(function(){
        var newLine=$('<line id="line2" x1="0" y1="0" x2="300" y2="300" />');
        $("#map").append(newLine);
    });
})
</script>
</head>

<body>

<h2 id="status">
0, 0
</h2>
<svg id="map" width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line id="line" x1="50" y1="0" x2="200" y2="300"/>
</svg>
<button id="add">add</button>



</body>
</html>

InformationsquelleAutor CL So | 2011-09-25

  1. 30

    Um Elemente hinzuzufügen oder Elemente eines SVG-Objekt die Elemente erstellt werden müssen in der SVG-namespace. So jQuery kann man nicht tun Sie dies derzeit (AFAIK) können Sie nicht verwenden jQuery, um das element zu erstellen. Dies funktioniert:

    $("#add").click(function(){
    var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
    newLine.setAttribute('id','line2');
    newLine.setAttribute('x1','0');
    newLine.setAttribute('y1','0');
    newLine.setAttribute('x2','300');
    newLine.setAttribute('y2','300');
    $("#map").append(newLine);
});

    Hier ist ein funktionierendes Beispiel.

    Von MDN: Sie (scheinbar), sollte DOM2-Methoden wie setAttributeNS()

    InformationsquelleAutor robertc

  2. 6

    mit etwas weniger code 

     $("#add").click(function(){
      $(document.createElementNS('http://www.w3.org/2000/svg','line')).attr({
          id:"line2",
          x1:0,
          y1:0,
          x2:300,
          y2:300
      }).appendTo("#map");

});

    InformationsquelleAutor manas

Schreibe einen Kommentar