search

hifive / hifivemain

main repository
http://www.htmlhifive.com/
Other
40 stars 10 forks source link

SVG要素でのマウスまたはタッチイベントのoffsetの計算がFirefox,iOS5,Androidでずれている #393

Closed fukudayasuo closed 8 years ago

fukudayasuo commented 10 years ago

Firefox、iOS5、Androidの場合、SVGまたはSVG内の要素でマウスまたはタッチをした場合、そのイベントオブジェクトにoffsetX/Yは格納されていないため、hifiveがoffsetを計算してい格納している。

しかし、その計算によるオフセットがズレている。

SVG要素の中にある要素(rect,pathなど)のうち、一番左上の要素を起点にした距離がoffsetに格納されている。

Firefox,iOS5,Androidでは、svg.getBoundingClientRect()で取得した値(===jQueryのoffset()で取得できる値)が、SVG内の要素によって描かれている図形を包含するのに必要十分な長方形の座標を表しており、SVG要素の位置を表していない。

(ただし、Firefoxでは、SVG内の要素によって異なり、pathならそのマージンとして+20pxされた図形としてClientRectが計算される。rectならマージンはないものとして計算されている。)

現状のコードではjQueryのoffset()を使っているため、上記の挙動が原因で、svg内の要素を包含する長方形の左上からの位置が、イベントオブジェクトのoffsetX/Yになっている。

fukudayasuo commented 10 years ago

svg要素の位置は、Firefox32以下、iOS5以下、Android(4.0.3で確認)で取得することが出来ない。 (Firefox33, iOS6,7,8ではgetBoundingClientRect()で取得できることを確認した)

svg要素の位置を取得できないブラウザについては、以下のようにしてフレームワーク側で取得するようにする。

上記処理が必要なブラウザかどうか(svgの位置が正しくとれないブラウザかどうか)は機能ベースで判定するようにする。

simdy commented 8 years ago

@fukudayasuo iOS9, Firefox, Chrome(PC/Android), Android標準ブラウザ(5) 各最新版での動作状況の確認をお願いします。

fukudayasuo commented 8 years ago

以下のブラウザについてSVGのオフセット取得時の挙動を確認し、いずれもsvg要素の位置を正しく取得できる(内部のrect,path等の要素に因らない)ことを確認しました。