svg - 在 svg.js 中实现的 svg 视图框问题/错误

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")

损坏/工作：

请原谅我在这里的笨拙……绿色方块已关闭，并且离点 (0,0) 越远越远。“关闭”是指绿色方块不会出现在点击发生的位置。由于某种因素。

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

可能相关：SVG viewBox Coordinates

标签： svgviewboxsvg.js

Answer 1

通过 SVG 通过 where (SVG.handlerMap[0] === <svgdom node object) 判断点似乎可以解决问题

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;