Question

第二次更新：如果我从头开始包含路径和圆圈（硬编码）一切都有效，为什么jquery追加不更新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>

这是点击测试按钮的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>

Answer 1

jQuery将动态生成的元素放在HTML命名空间中，但它们必须位于SVG命名空间中。如果您在$('#drawing').append(...)：

部分之后添加以下代码，则会看到

alert((new XMLSerializer()).serializeToString(document.getElementById("drawing")));

这会给你类似的东西：

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

请注意<path xmlns="http://www.w3.org/1999/xhtml" ...>部分。

要解决此问题，您可以使用纯DOM操作方法，或者可以使用DOMParser：

$('#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);

请注意，您必须将所有内容都包装到<g>元素中，原因有两个：

.parseFromString()需要格式良好的XML语法，只需要一个根元素
您需要在某处声明SVG名称空间（但您也可以在<circle>和<path>元素上执行此操作。

这让你半途而废。您的代码仍会生成零长度线和屏幕外圈。

在最后获得带有圆圈的svg线以显示

1 个答案: