SVG技巧：正常執行SVG拖曳の動作

Javascript Event 的使用

Javascript中，事件處理常常用到如onmouseclick、onmousemove、onmouseup等動作，在SVG圖象上運用非常頻繁。而使用以上event最簡單的方式即是直接在SVG物件的描述中加入:

onmousedown="function( )"、onmousemove="function( )"、onmouseup="function ( )"

例如在一個SVG四方體物件中：

＜rect x="0" y="0" width="100" height="60" fill="red" onmousedown="downFunc()"/＞

上述物件就會在被使用者點擊時觸發 downFunc( ) 這個函式。

拖曳動作
1、這裡所謂的「拖曳動作」指的是「按下後隨即移動」的動作，即「mouse down than move」的動作。
2、拖曳動作運用在SVG圖象上會有一種狀況是「SVG圖象被當作是圖片」。使用Firefox對SVG物件做拖曳時，若動作太快（即點擊物件後隨即移動），會被視為「抓取此SVG圖象」的動作。
3、假若程式原本的動作是想要「定點移動SVG圖象」，而非抓取SVG圖象，瀏覽器所產生的錯誤動作實為一大誤會(簡單說就是瀏覽器太雞婆....)。

解決方案一（隱藏後顯示）：
說明:
1、即對SVG內容『setAttribute("display","none") 』後，接著『setAttribute("display","inline")』。
2、需注意的是，假若隱藏後隨即顯示將會沒有效果，無法完成原本預期要的動作。
3、需要間隔一小段時間，再將隱藏後的SVG圖象回愎顯示(可使用setTimeout( )來完成)。
4、需配合物件copy的方式來完成。由於主SVG物件從隱藏回愎到顯示時，會明顯發現物件有「閃爍」的動作，感覺非常不自然，在此使用副物件的方式，來製造主物件的分身，產生「無閃爍」的假像。
5、在主SVG物件被隱藏後，滑鼠對於主物件的Focus將會被解除。這樣一來即可避開「抓圖」的問題。

實行方式
Copy Sub Content:對將被拖曳的SVG圖象使用『cloneNode(true)』如:
　　var subSVGObj = SVGObj.cloneNode(true);
　　subSVGObj.setAttribute("display","none");
上述程式內容是對目標SVG圖象Copy一份相同的內容至subSVGObj內(記得預設為隱藏)，接下來有兩個動作：
　　隱藏主SVG內容
　　function contentHide(){
　　　　subSVGObj.setAttribute("display","inline");
　　　　SVGObj.setAttribute("display","none");
　　｝
　　回愎顯示主SVG內容
　　function contentShow(){
　　　　SVGObj.setAttribute("display","inline");
　　　　subSVGObj.setAttribute("display","none");　　　　
　　｝
步驟：
當onmousedown產生作用時：

　　contentHide( );
　　setTimeout("contentShow( )",100);

上述描述即「先隱藏主SVG物件，顯示副SVG物件，0.1秒後再回愎」。