2

重複の可能性:
jquery の追加が svg 要素で機能しない?

このスクリプトの問題点を教えてください。

つまり、円要素を作成しますが、表示されません...そしてありがとうございます!

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

1 に答える 1

1

jQueryのappend関数はinnerHTMLにのみ影響します。残念ながら、SVGはHTML名前空間ではなくSVG名前空間にあるため、innerHTMLに基づいて再レンダリングしません。

回避策は、svgをdivでラップしてから、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>
于 2012-12-20T00:10:59.300 に答える