1

我在 HTML 中创建了一个 SVG 画布内联，动态使用 keith-wood jquery 插件。

我使用了 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 内的一个元素上时，我想将鼠标事件的 pageX 和 pageY 像素坐标转换为图块的坐标，给定 viewBox 缩放。因此，如果用户将鼠标悬停在第一个图块上，我希望返回 {x: 0, y: 0}，给定 e.pageX 和 e.pageY 其中 e 是 mousemove jquery 事件对象。

我该如何计算？

谢谢

4

0 回答 0