Question

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

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

CODE：

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
});



});

Answer 1

您的svg已被插入，但已从视口中删除，因此您无法看到它，向width添加了一些height和svg，并且还设置了正确的cx cy和$(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和{{1}}以CSS像素为单位给出相对于视口的坐标。

Example1，Example2和more about SVG。

Answer 2

我认为当你动态创建一个svg节点时，你必须创建命名空间。

var ns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(ns, "svg");
$(svg).append("<circle ...");

添加到HTML时SVG不显示

2 个答案: