如何在縮放的SVG中將屏幕座標轉換爲文檔空間？

我使用Keith Wood的svg jquery插件，而不是HTML5畫布。如何在縮放的SVG中將屏幕座標轉換爲文檔空間？

我定義我的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（）來計算點。

也許我不再需要JQuery插件，但它現在會做。無法看到如何使用只有插件。

$('#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'}); 
});

來源

2014-03-04 Jon

請參閱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>

來源

2014-03-04 23:48:24 defghi1977

好吧，我得到它的工作使用您的示例代碼來獲取映射和JQuery的SVG插件繪製圓圈。 – Jon

如果你調用該函數getScreenCTM()的SVG元素，它將返回用於文檔轉換座標到屏幕座標變換矩陣。您需要另一個方向的變換矩陣，因此請在矩陣對象上調用inverse()。

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

現在你可以將一個點目標做最後的轉換：

pt = pt.matrixTransform(transform);

Working demo here

來源

2014-03-05 00:01:13

出於某種原因，pt.x = evt.pageX無法正常工作，但pt.x = evt.clientX的確如此，所以我使用了defghi1977的答案。歡呼，並感謝詳細的答案。 – Jon

如何在縮放的SVG中將屏幕座標轉換爲文檔空間？

回答

相關問題