Hi everybody, i try to use Pyjamas to make SVG more interactive. I try to create a minimal example to show the problem when using Dom.appendChild. The newly created rectangle is added but the browser does not render it.
Im not sure if this has something todo with the namespace issue and dom level 2. The example i tried to port is: ========================================================= <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> <svg version="1.1" xmlns="http://www.w3.org/2000/svg";> <script type="text/ecmascript"> <![CDATA[ function changeElement(evt) { var svgNS = "http://www.w3.org/2000/svg";; var textlink = evt.target; var rectangle = document.getElementById("square"); var parent = null; var circle = null; if(rectangle) { parent = rectangle.parentNode; parent.removeChild(rectangle); circle = document.createElementNS(svgNS, "circle"); circle.setAttributeNS(null, "cx", 60); circle.setAttributeNS(null, "cy", 80); circle.setAttributeNS(null, "r", 50); circle.setAttributeNS(null, "fill", "gold"); circle.setAttributeNS(null, "stroke", "black"); parent.appendChild(circle); } else { alert("Already replaced!") } } ]]> </script> <text x="10" y="20" onclick="changeElement(evt)" style="font-size:11pt"> Click the Text </text> <rect id="square" x="10" y="30" height="100" width="100" fill="gold" stroke="black" /> </svg> the source (in german sorry): http://www.selfsvg.info/?section=10.5 http://www.selfsvg.info/content/listings/removeChild_createElementNS_example.svg ================================================================== In my solution i want to remove and add a rectangle when clicking the buttons. from pyjamas.ui.RootPanel import RootPanel from pyjamas.ui.HTML import HTML from pyjamas.ui.Button import Button from pyjamas import Window from pyjamas import DOM from pyjamas import logging log = logging.getConsoleLogger() log.info('test_svg_remove_append') def onButtonClickRemoveRect(evt): svg_div = DOM.getElementById("svg_div") log.info(svg_div.innerHTML) svgNS = "http://www.w3.org/2000/svg"; svg = DOM.getElementById("mySVG") svg.removeChild(svg.childNodes.item(3)) def onButtonClickAddRect(evt): svg_div = DOM.getElementById("svg_div") string = svg_div.innerHTML log.info(string) svgNS = "http://www.w3.org/2000/svg"; svg = DOM.getElementById("mySVG") # does not seem to work # rect = DOM.createElement("rect") # DOM.setAttribute(rect,"fill", "green") # DOM.setAttribute(rect,"height","100") # DOM.setAttribute(rect,"width", "100") # DOM.setAttribute(rect,"stroke", "black") # DOM.setAttribute(rect,"x", "10") # DOM.setAttribute(rect,"y", "10") # DOM.setAttribute(rect,"id","newRect1") #seems to work adds rect entry (see log) #but browser doesn't render the rect rect = DOM.createElement("rect") rect.setAttribute("fill", "green") rect.setAttribute("height","100") rect.setAttribute("width", "100") rect.setAttribute("stroke", "black") rect.setAttribute("x", "10") rect.setAttribute("y", "10") rect.setAttribute("id","newRect1") DOM.appendChild(svg,rect) svg_div = DOM.getElementById("svg_div") string = svg_div.innerHTML log.info(string) h = HTML(""" <div id="svg_div"> <svg id="mySVG" width="400" height="200" viewbox="0 0 400 200"> <text x="10" y="20" style="font-size:11pt"> Hello SVG Canvas </text> <rect id="square1" x="0" y="25" height="50" width="50" fill="gold" stroke="black"></rect> <rect id="square2" x="55" y="25" height="50" width="50" fill="red" stroke="black"></rect> </svg> </div> """) RootPanel().add(h) remB = Button("OnClick", onButtonClickRemoveRect) RootPanel().add(remB) addB = Button("Add Rect", onButtonClickAddRect) RootPanel().add(addB) ================================================================= like i said in the log u can see that the rectangle was added but the browser does not render it. Maybe someone of you can see my mistake :-D Thanx in advance --
