Как конвертировать screen координаты в пространство документа в масштабированном SVG?

Question

Я использую плагин svg jquery Keith Wood, а не canvas HTML5.

Я определяю свое изображение svg таким образом, чтобы масштабировать мое изображение треугольника svg, чтобы оно соответствовало его контейнеру div:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" viewBox="0 0 299 215" >
    <g>
    <polygon points="1,1 299,1 149,210" fill="blue" stroke="blue" stroke-width="0" class="votenow"/>
    </g>
    </svg>

Но как мне тогда сопоставить системы координат? Я хочу зафиксировать местоположение мыши в некоторой точке над треугольником и нарисовать окружность в этих координатах X Y, но круг рисуется в другом месте, потому что системы координат не совпадают.
Таким образом например, круг рисуется из точке 10,10, но, похоже, он реально будет в 50,60
Окончательное решение: с помощью плагина JQuery, - нарисуйте круг и getScreenCTM() для вычисления точек.

Я не смог понять, как это сделать, используя только плагин.

$('#cvtriangle .tri').on( "click", function(e) {
    jqsvg = $('#cvtriangle').svg('get');
    svg = document.querySelector("svg");
    var pt = svg.createSVGPoint();
    pt.x = e.clientX;
    pt.y = e.clientY;
    pt = pt.matrixTransform(svg.getScreenCTM().inverse());
    jqsvg.circle(pt.x, pt.y, 5, {class: 'vote', fill: 'white', stroke: 'white', strokeWidth: 2, cursor: 'pointer'});
});

_{Свободный перевод вопроса How do you convert screen coordinates to document space in a scaled SVG? от участника @Jon.}

Answer 1

Смотрите: http://msdn.microsoft.com/en-us/library/hh535760%28v=vs.85%29.aspx

Для этой задачи, использование метода getScreenCTM() очень полезно.

<svg viewBox="0 0 300 300" onload="
    var c = document.getElementById("c");
    var cx = c.cx.baseVal;
    var cy = c.cy.baseVal;
    var svg = this;
    var point = svg.createSVGPoint();
    svg.onmousemove = function(e){
        point.x = e.clientX;
        point.y = e.clientY;
        var ctm = c.getScreenCTM();
        var inverse = ctm.inverse();
        var p = point.matrixTransform(inverse);
        cx.value = p.x;
        cy.value = p.y;
    };
">
    <rect width="100%" height="100%" fill="yellow"/>
    <circle id="c" r="10" fill="blue"/>
</svg>

_{Свободный перевод ответа How do you convert screen coordinates to document space in a scaled SVG? от участника @defghi1977.}

Answer 2

Если вы вызовите функцию getScreenCTM() для элемента SVG, она вернет матрицу преобразования, используемую для преобразования координат документа в screen координаты.

Вам нужна матрица преобразования для другого направления, поэтому вызовите inverse() для объекта матрицы.

var transform = svg.getScreenCTM().inverse();

Теперь вы можете преобразовать точечный объект, чтобы выполнить окончательное преобразование:

pt = pt.matrixTransform(transform);

var x = document.getElementById("x"),
    y = document.getElementById("y"),
    svg = document.querySelector("svg");

svg.addEventListener("mousemove", function(evt) {
    var pt = svg.createSVGPoint();
    pt.x = evt.pageX;
    pt.y = evt.pageY;
    pt = pt.matrixTransform(svg.getScreenCTM().inverse());

    x.innerHTML = pt.x;
    y.innerHTML = pt.y;
}, false);

#container {
    width: 500px;
    height: 500px;
}

<div id="container">
    <svg version="1.0" viewbox="0 0 100 100">
        <rect x="0" y="0" width="100" height="100" fill="blue"/>
    </svg>
</div>

<div>
    x = <span id="x"></span><br/>
    y = <span id="y"></span>
 </div>

_{Свободный перевод ответа How do you convert screen coordinates to document space in a scaled SVG? от участника @Paul LeBeau.}

БЛОГ НА HUSL

Как конвертировать screen координаты в пространство документа в масштабированном SVG?

Ответы (2 шт):