1

我有一个非常有趣的问题，当我将新的 SVG 元素添加到 div 时，只有第一次调用 append 时才会出现新的 svg 元素。它们在硬编码时工作，但是当它们被添加到 onmousedown 时，它们不会出现，即使它们被添加到 HTML 文件中。我假设这是我对 SVG 理解的问题，并且无法动态添加元素，但我一直在寻找互联网，并找不到任何关于该主题的内容。

你可以看到在 $(document).mousedown 函数中，一个新的圆圈被附加到了 svg holder 中，但是即使它被添加到了 SVG holder 中，它也不会显示在网页上。

代码：

HTML：

<div id="svgHolder">
    <!--THIS CIRCLE SHOWS UP-->
    <svg><circle cx='50' cy='50' r='40' stroke='black' stroke-width='1' fill='red' /></svg>
</div>

jQuery/JavaScript：

$(document).ready(function(){

var mouse={
    x:0,
    y:0,
    drawing:false,
    lastX:0,
    lastY:0,

}

$(document).mousedown(function(e){
    console.log('md')
    mouse.x=e.clientX
    mouse.y=e.clientY
    mouse.drawing=true
            //THIS CIRCLE WILL BE ADDED TO THE SVGHOLDER, BUT WILL NOT SHOW UP
    $("#svgHolder").append("<svg><circle cx='"+mouse.x+"' cy='"+mouse.y+"' r='40' stroke='black' stroke-width='1' fill='red' /></svg>");
});

$(document).mouseup(function(e){
    console.log('mu')
    mouse.x=e.clientX
    mouse.y=e.clientY
    mouse.drawing=false
});



$(document).mousemove(function(e){
    console.log('mm')
    mouse.x=e.clientX
    mouse.y=e.clientY
});



});
4

2 回答 2

4

我认为当您动态创建svg节点时，您必须创建名称空间。

var ns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(ns, "svg");
$(svg).append("<circle ...");
于 2012-12-03T21:17:14.417 回答
4

您svg正在插入但不在您的视口中，因此您看不到它，添加一些widthand并height为and属性svg设置适当的值，即cxcy

$(document).mousedown(function(e){
    $("#svgHolder")
    .append("<svg width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='1' fill='red' /></svg>");
});

还要记住clientX并clientY以 CSS 像素给出相对于视口的坐标。

Example1、Example2和更多关于 SVG的内容。

于 2012-12-03T21:38:40.110 回答