先日、『firefox 17 以後、inline SVG において ドラッグが効かないことがある!』と
書いたのですが、「firefox 18.0b3」になっても、まだ 解決されていないことから、状況を
もう少し詳しく調べてみました。
下記の "sample A"・"sample B"・"sample C" は、画像に clipPath を適用した例ですが、
違いは 「赤のアンダーライン部」だけで、ここで 「clipPath を適用した画像」の露出位置を
ズラして(translate して)います。

これをドラッグ出来る様にしたものが 下記です。
View a full code of "Sample A" as SVG (SVG-enabled browsers only)
View a full code of "Sample B" as SVG (SVG-enabled browsers only)
View a full code of "Sample C" as SVG (SVG-enabled browsers only)
処が、"sample A" では 「clipPath を適用した画像」を 問題なくドラッグ出来るのに対し、
※ "sample B" では、「dragable area」が 左上1/4 に狭められています。
※ "sample C" では、全くドラッグ出来ません。

そこで 念の為、『クリックした時に 「mouse event」が発生する領域』をチェックしてみた処、
「dragable area」と 全く同じでした。
(参考; document.getElementById("pieceA").onmousedown = dragstart;)
以上から推測ですが、『「onmousedown event」が発生する領域』が、不思議なことに
前述の「赤のアンダーライン部」によって、同じ量だけ 移動させられているのでは???
結果、"sample C" では いくら 「clipPath を適用した画像」をクリックしても 「onmousedown
event」は発生しないし、ドラッグも出来ない!と・・・・・
Mozilla さん、早く直してぇーーーー
書いたのですが、「firefox 18.0b3」になっても、まだ 解決されていないことから、状況を
もう少し詳しく調べてみました。
下記の "sample A"・"sample B"・"sample C" は、画像に clipPath を適用した例ですが、
違いは 「赤のアンダーライン部」だけで、ここで 「clipPath を適用した画像」の露出位置を
ズラして(translate して)います。

これをドラッグ出来る様にしたものが 下記です。
View a full code of "Sample A" as SVG (SVG-enabled browsers only)
View a full code of "Sample B" as SVG (SVG-enabled browsers only)
View a full code of "Sample C" as SVG (SVG-enabled browsers only)
処が、"sample A" では 「clipPath を適用した画像」を 問題なくドラッグ出来るのに対し、
※ "sample B" では、「dragable area」が 左上1/4 に狭められています。
※ "sample C" では、全くドラッグ出来ません。

そこで 念の為、『クリックした時に 「mouse event」が発生する領域』をチェックしてみた処、
「dragable area」と 全く同じでした。
(参考; document.getElementById("pieceA").onmousedown = dragstart;)
以上から推測ですが、『「onmousedown event」が発生する領域』が、不思議なことに
前述の「赤のアンダーライン部」によって、同じ量だけ 移動させられているのでは???
結果、"sample C" では いくら 「clipPath を適用した画像」をクリックしても 「onmousedown
event」は発生しないし、ドラッグも出来ない!と・・・・・
Mozilla さん、早く直してぇーーーー
Robert Longsonさんに調べていただきました。
調べた結果、Bug 820506と同じようなバッグです。詳しくは以下のURL先に書いてあります。
https://bugzilla.mozilla.org/show_bug.cgi?id=820506
Firefox 19で直すようにします。
ご検討ありがとうございます!
ありがとうございました