dodać nową linię do svg, błąd nie może zobaczyć linii

Chcę dodać nową linię do svg po naciśnięciu przycisku Dodaj, należy dodać nową linię do svg Mogę się upewnić, że linia jest dodane w elementach, ale dlaczego nie jest wyświetlane na ekranie?dodać nową linię do svg, błąd nie może zobaczyć linii

<!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>

Źródło

2011-09-25 CL So

Aby dodać elementy do obiektu SVG, elementy te muszą zostać utworzone w przestrzeni nazw SVG. Ponieważ jQuery nie pozwala na to teraz (AFAIK), nie można użyć jQuery do stworzenia elementu. To zadziała:

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

Here's a working example.

Źródło

2011-09-25 23:32:35 robertc

Od MDN: Państwo (podobno) należy użyć funkcji [metody DOM2] (https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course #Scripting_in_namespaced_XML), takie jak 'setAttributeNS()' – Trojan

z nieco mniej kodu

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

});

Źródło

2016-07-06 18:35:46 manas

dodać nową linię do svg, błąd nie może zobaczyć linii

Odpowiedz

Powiązane problemy