svg viewbox вопрос / ошибка, реализованная в svg.js

Question

Я пишу SVG-графику на экран, используя html и библиотеку svg.js. Когда я применяю окно просмотра, я получаю странное поведение, которое я не понимаю и не могу разрешить. Разница в коде между рабочим и нерабочим кодом следующая:

Рабочий код:

//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 Координаты

Answer 1

Вы должны преобразовать координаты мыши в систему координат SVG. Вы можете сделать это, используя метод point():

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

Answer 2

Перетаскивание точки через 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;