Javascript 获取一个svg行，在末尾显示一个圆圈_Javascript_Jquery_Svg_Javascript Objects

Javascript 获取一个svg行，在末尾显示一个圆圈

javascript jquery svg

Javascript 获取一个svg行，在末尾显示一个圆圈,javascript,jquery,svg,javascript-objects,Javascript,Jquery,Svg,Javascript Objects,第二次更新：如果我从一开始就包含路径和圆（硬编码），那么一切都正常，为什么jquery append不更新dom 更新：我意识到我应该检查我的示例，因为它没有我在实际代码中所做的一切我试图画一条svg线，在其末端画一个圆圈，并将其位置记录在JavaScript对象中。然而，我遇到了一些麻烦，让图像显示，我很困惑，为什么没有相关的firebug或chrome消息显示出来。这是我的密码：这里是更新的代码 <!doctype html> <html lang="en">

第二次更新：如果我从一开始就包含路径和圆（硬编码），那么一切都正常，为什么jquery append不更新dom

更新：我意识到我应该检查我的示例，因为它没有我在实际代码中所做的一切

我试图画一条svg线，在其末端画一个圆圈，并将其位置记录在JavaScript对象中。然而，我遇到了一些麻烦，让图像显示，我很困惑，为什么没有相关的firebug或chrome消息显示出来。这是我的密码：

这里是更新的代码

<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        input{
        border: none;
        background: inherit;
        }
        body{
        font-family: Courier New;
        }
        .point{
        width: 10px;
        height: 10px;
        border:0px solid;
        border-radius:5px;
        background: #000099;
        z-index: 9999;
        }
        #drawnLine{
        }
        .identification{
        position: absolute;
        background: #ddd;
        width: 200px;
        z-index: 9888;
        top:0;
        left:0;
        }
        #subjectImage{
        margin: auto;
        height: 100%;
        display: block;
        z-index: 1;
        }
    </style>
    </head>
    <body>
    <svg id="drawing" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:2">

    </svg>
    <button class="identification" onmousedown="drawLine(this)" id="tests" >test</button>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        var zindexParts = 100;
        var mouseDX = 0;
        var mouseDY = 0;
        var part = {
        id: 'Ganglion',
        name: {
            location: {
            x: 0, y: 0, z: 0
            }
        },
        line: {
            stroke: "blue",
            strokewidth: "3",
            beginning: {
            x: 0, y: 0, z: 0,
            circle: {
                cx: 0,
                cy: 0,
                r: 5
            }
            },
            end: {
            x: 0, y: 0, z: 0,
            circle: {
                cx: 0,
                cy: 0,
                r: 5
            }
            }
        }
        };
        function drawLine(line) {
        $(line).mousedown(function(e) {
            part.line.beginning.x = $(this).position().left + ($(this).width() / 2);
            part.line.beginning.y = $(this).position().top + ($(this).height() / 2);
            $('body').mousemove(function(ee) {
                part.line.end.circle.cx = ee.pageX;
                part.line.end.circle.cy = ee.pageY;
                part.line.end.x = ee.pageX;
                part.line.end.y = ee.pageY;
                $('#' + part.id + 'Circle').attr({cx: part.line.end.circle.cx, cy: part.line.end.circle.cy});
                $('#' + part.id + 'Line').attr('d', 'M ' + part.line.beginning.x + ' ' + part.line.beginning.y + ' L ' + part.line.end.x + ' ' + part.line.end.y);
            });
        });
        }
        $(function() {
        $(".draggable").draggable();
        $('body').mouseup(function(e) {
            $('body').off('mousemove');
        });
        $('#drawing').append('<path id="' + part.id + 'Line" class="drawnLine" style="z-index:' + zindexParts++ + '" d="M 0 0 L 0 0" stroke="blue" stroke-width="3"/><circle id="' + part.id + 'Circle" class="point draggable ui-widget-content"style="z-index:' + zindexParts++ + '" cx="-999" cy="-999" r="' + part.line.end.circle.r + '" />');
        });
    </script>
    </body>
 </html>


演示
输入{
边界：无；
背景：继承；
}
身体{
字体系列：信使新；
}
.点{
宽度：10px；
高度：10px；
边框：0px实心；
边界半径：5px；
背景：#000099；
z指数：9999；
}
#抽绳{
}
.识别{
位置：绝对位置；
背景：ddd；
宽度：200px；
z指数：9888；
排名：0；
左：0；
}
#主体意象{
保证金：自动；
身高：100%；
显示：块；
z指数：1；
}
测试
var=100；
var mouseDX=0；
var mouseDY=0；
变量部分={
id:'神经节'，
姓名：{
地点：{
x:0，y:0，z:0
}
},
行：{
笔画：“蓝色”，
冲程宽度：“3”，
开始：{
x:0，y:0，z:0，
圆圈：{
cx:0，
cy:0，
r:5
}
},
完:{
x:0，y:0，z:0，
圆圈：{
cx:0，
cy:0，
r:5
}
}
}
};
功能抽绳（线）{
$（行）.mousedown（函数（e）{
part.line.start.x=$（this.position（）.left+（$（this.width（）/2）；
part.line.start.y=$（this.position（）.top+（$（this.height（）/2）；
$（'body'）.mousemove（函数（ee）{
part.line.end.circle.cx=ee.pageX；
part.line.end.circle.cy=ee.pageY；
part.line.end.x=ee.pageX；
part.line.end.y=ee.pageY；
$（'#'+part.id+'Circle'）.attr（{cx:part.line.end.Circle.cx，cy:part.line.end.Circle.cy}）；
$（'#'+part.id+'Line'）.attr（'d'，'M'+part.Line.start.x+''+part.Line.start.y+'L'+part.Line.end.x+''+part.Line.end.y）；
});
});
}
$（函数（）{
$（“.draggable”）.draggable（）；
$（'body'）.mouseup（函数（e）{
$（'body'）.off（'mousemove'）；
});
$（“#图纸”）。追加（“”）；
});

下面是单击测试按钮的dom结果：

<svg id="drawing" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%; height:100%;  top:0; left:0; z-index:2">
    <path id="GanglionLine" class="drawnLine" style="z-index:100" d="M 0 0 L 0 0" stroke="blue" stroke-width="3"></path>
    <circle id="GanglionCircle" class="point draggable ui-widget-content" style="z-index:101" cx="9" cy="9" r="5"></circle>
</svg>

jQuery将动态生成的元素放在HTML命名空间中，但它们必须放在SVG命名空间中。如果在节

$（'#drawing'）之后添加以下代码，您会看到。append（…）

：

这将为您提供如下信息：

<svg style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:2" version="1.1"
  xmlns="http://www.w3.org/2000/svg" id="drawing">
  <path xmlns="http://www.w3.org/1999/xhtml" stroke-width="3" stroke="blue" d="M 0 0 L 0 0"
    style="z-index:100" class="drawnLine" id="GanglionLine"/>
  <circle xmlns="http://www.w3.org/1999/xhtml" r="5" cy="-999" cx="-999" style="z-index:101"
    class="point draggable ui-widget-content" id="GanglionCircle"/>
</svg>

请注意，出于两个原因，您必须将所有内容包装到

元素中：

```
.parseFromString（）
```
需要格式良好的XML语法，并且只包含一个根元素
您需要在某个地方声明SVG名称空间（但也可以在
和
元素上声明）

这让你走到了一半。您的代码仍然会生成一条零长度的线和一个屏幕外的圆。

在DOM中实际创建圆和线元素的代码在哪里？@someone其他人顺便说一句：SVG中没有

z-index

属性，因此

style=“z-index:100”

是没有意义的。

<svg style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:2" version="1.1"
  xmlns="http://www.w3.org/2000/svg" id="drawing">
  <path xmlns="http://www.w3.org/1999/xhtml" stroke-width="3" stroke="blue" d="M 0 0 L 0 0"
    style="z-index:100" class="drawnLine" id="GanglionLine"/>
  <circle xmlns="http://www.w3.org/1999/xhtml" r="5" cy="-999" cx="-999" style="z-index:101"
    class="point draggable ui-widget-content" id="GanglionCircle"/>
</svg>

$('#drawing').append((new DOMParser()).parseFromString(
  '<g xmlns="http://www.w3.org/2000/svg"><path id="' + part.id + 'Line" class="drawnLine" style="z-index:' + zindexParts++ + '" d="M 0 0 L 0 0" stroke="blue" stroke-width="3"/><circle id="' + part.id + 'Circle" class="point draggable ui-widget-content" style="z-index:' + zindexParts++ + '" cx="-999" cy="-999" r="' + part.line.end.circle.r + '" /></g>', 
  "image/svg+xml"
).documentElement);