svg viewbox question/bug 在 svg.js 中实现

Question

我正在使用 html 和库 svg.js 将 svg 图形写入屏幕。当我应用视图框时，出现一种我无法理解且无法解决的奇怪行为。工作代码和非工作代码的区别如下：

工作代码：

//Works great
svg = SVG(document.getElementsByTagName("div")[0]);
draw = svg  //.viewbox(0, 0, 300, 300)

破产：

//XY coordinates are off weird amounts
svag = SVG(document.getElementsByTagName("div")[0]);
draw = svg.viewbox(0, 0, 300, 300) //adding view box causes the problem

实施：

function drawRect(e) {
    var rectX = e.clientX;
    var rectY = e.clientY;
    draw.rect(10,10).move(rectX, rectY).fill("#00FF00")

broken/working:

请原谅我的笨拙.. 绿色方块关闭，离点 (0,0) 越远，关闭的越多。 "off" 我的意思是绿色方块不会出现在点击发生的地方。由于某些因素。

我想知道如何调整我的视图框代码：

可能相关：SVG viewBox Coordinates

Answer 1

通过 SVG 通过 where (SVG.handlerMap[0] === <svg dom 节点对象) 判断点似乎可以解决问题

var p = SVG.handlerMap[0].createSVGPoint();
p.x = rectX;
p.y = rectY;
var pN = p.matrixTransform(SVG.handlerMap[0].getScreenCTM().inverse());
rectX = pN.x;
rectY = pN.y;

Answer 2

你得把鼠标坐标转换成svg的坐标系。您可以使用 point() 方法来做到这一点：

p = draw.point(e.clientX, e.clientY)
draw.rect(10,10).center(p.x, p.y).fill("#00FF00")

svg viewbox question/bug 在 svg.js 中实现

svg viewbox question/bug implemented in svg.js

svg

viewbox

svg.js