最後得到一個帶圓圈的svg行顯示

第二次更新：如果我從頭開始包含路徑和圓圈（硬編碼），那麼爲什麼jquery append不會更新dom？最後得到一個帶圓圈的svg行顯示

更新：我意識到我應該檢查我的例子，因爲它沒有我在我的實際代碼中所做的一切。

我想繪製一個帶圓圈的svg線，並在JavaScript對象中記錄它的位置。然而，我遇到了一些麻煩讓圖像出現，我很困惑，爲什麼，沒有相關的螢火蟲或鉻消息出現。這裏是我的代碼：

下面是更新後的代碼

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

來源

2014-01-05 SomeoneElse

哪裏是實際創建的圓和DOM中的線元素的代碼？ –

的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>元素）

這讓你一半在那裏。您的代碼仍會生成零長度線和屏幕外圓。

來源

2014-01-08 06:53:22

謝謝你爲什麼發生這種好的解釋！ – SomeoneElse

@SomeoneElse BTW：在SVG中沒有'z-index'屬性，所以'style =「z-index：100」'是毫無意義的。 –

最後得到一個帶圓圈的svg行顯示

回答

相關問題