SVG脚本错误[重复]答案

【问题标题】：SVG script error [duplicate]SVG脚本错误[重复]
【发布时间】：2012-12-07 10:25:12
【问题描述】：

可能重复：
jquery’s append not working with svg element?

谁能告诉我这个脚本有什么问题？

我的意思是，它创建了一个圆形元素，但没有出现……谢谢！

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

【问题讨论】：

event 是什么？你有什么错误吗？
与stackoverflow.com/questions/3642035/…相关

标签： javascript svg

【解决方案1】：

jQuery 的 append 函数只影响 innerHTML。不幸的是，SVG 不会基于 innerHTML 重新渲染，因为它位于 SVG 命名空间而不是 HTML 命名空间中。

解决方法是将您的 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>

【讨论】：