keith-wood jquery プラグインを動的に使用して、SVG キャンバスを HTML でインラインで作成しました。
SVG 要素で viewBox 属性を使用して、SVG キャンバスのコンテンツをスケーリングしました。
SVG キャンバス内に、それぞれ 1x1 単位の繰り返しパターン (タイル) で四角形を描画します。
800x800 のボード:
var svg = $(containerDiv).svg('get');
svg.configure({viewBox: minX + "" + minY + "" + width + "" + height});
var pat1 = svg.pattern('pat1', 0, 0, 1, 1, {patternUnits: 'userSpaceOnUse'});
var rectTile = svg.rect(pat1, 0, 0, 1, 1);
var rectBoard = svg.rect(0, 0, 800, 800, {fill: 'url(#pat1)'});
ユーザーが SVG 内の要素の 1 つにカーソルを合わせたときに、マウス イベントの pageX と pageY のピクセル座標を、viewBox のスケーリングを考慮してタイルの座標に変換したいと考えています。したがって、ユーザーが最初のタイルにカーソルを合わせた場合、e.pageX と e.pageY を指定すると、{x: 0, y: 0} が返されます。ここで、e は mousemove jquery イベント オブジェクトです。
これを計算するにはどうすればよいですか?
ありがとう