SVG 스크립트 오류

가능한 중복 :
jquery’s append not working with svg element?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>

출처

2012-12-19 Keith Afas

'event'은 무엇입니까? 약간의 오류가 있습니까? –

http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element 관련 –

jQuery의 추가 기능은 innerHTML에만 영향을줍니다. 불행히도 SVG는 HTML 네임 스페이스가 아닌 SVG 네임 스페이스에 있기 때문에 innerHTML을 기반으로 다시 렌더링하지 않습니다. 주위

작품은 사업부의 전체 내용을 다시 쓰게 한 후 사업부에서 SVG를 래핑하는 것입니다 :

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-20 00:10:59

SVG 스크립트 오류

답변

관련 문제