SVG script error

Question

Possible Duplicate:
jquery’s append not working with svg element?

Can Someone Tell Me What is the problem with this script?

I mean, it creates a circle element but does not appear...and thank you!

<html>
<head>
<script src="jquery.js"></script>
<script>
document.write("<svg id='a' version='1.1' xmlns='http://www.w3.org/2000/svg'>");
  function a(event)
    {var mouseX=(event.clientX)-8;
     var mouseY=(event.clientY)-8;
     var object=document.getElementById("a");
     $(object).append("<circle cx='"+mouseX+"' cy='"+mouseY+"' r='10' stroke='black' stroke-width='5' />");}
document.write("</svg>");
</script>

</head>
<body onclick="a(event)">

</body>
</html>

related to http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element — Patrick Gunderson, Dec 20 '12 at 00:04

score 1 · Answer 1 · answered Dec 20 '12 at 00:10

jQuery's append function only affects innerHTML. Unfortunately, SVG does not rerender based on innerHTML since it is in the SVG namespace not the HTML namespace.

The work around is to wrap your svg in a div then rerender the entire contents of the div:

http://jsfiddle.net/gunderson/TQryX/3/

<div class="button">
Make Circle
</div>
<div id="svg_wrapper">
<svg id='a' version='1.1' xmlns='http://www.w3.org/2000/svg' width="1000px" height="1000px" viewBox="0 0 1000 1000">
    </svg></div>
<script>
function makeCircle(event) {
    var mouseX = (event.clientX) * 10;
    var mouseY = (event.clientY) * 10;
    var object = document.getElementById("a");
    $(object).append("<circle cx='" + mouseX + "' cy='" + mouseY + "' r='10' fill='red' stroke='black' stroke-width='1' />");
    $("#svg_wrapper").html( $("#svg_wrapper").html());
}

$(document).ready(function(){
    $(".button").click(makeCircle);
});
</script>
<style>
.button{
    width: 100px;
    height: 100px;
    background: #a00;
}

#a{
    width: 1000px;
    height: 1000px;
}

</style>

SVG script error

1 Answers1