Snap.SVG s.node.offsetLeft [Top]未定義？

在Snap.SVG中，我需要SVG容器左上角的位置。我得到所需要的座標與Snap.SVG s.node.offsetLeft [Top]未定義？

s.mousemove(moveFunc)

但它們是相對於HTML體的位置。該html文件是響應。結果期運用

s.node.offsetLeft

或

s.node.offsetTop

是未定義的。帶有ID和使用的一個SVG容器

document.getElementByID('usedId').offsetLeft

或其他偏移量...也給'未定義'。結果獨立於瀏覽器。到目前爲止，我找不到有用的答案或示例。我希望得到一些幫助。

完成到IAN的答案。 html正文集中於瀏覽器的視口，內容負責。 SVG容器應該在主體中居中。 mousemove事件爲我提供了相對於視口的正確座標。如果我想要例如SVG grafic元素將跟隨鼠標或放置在鼠標指針，我需要SVG容器的左上角的相對座標，而不是x = 0和y = 0的絕對座標。我怎樣才能得到這些座標？對於絕對定位的html元素，我可以獲得所需的偏移量，但不能用於SVG。

對不起，我試過了一個jsfiddle但沒有成功。在這裏，我的代碼中使用：

<!DOCTYPE html> 
<html> 
<head> 
<script src="snap.svg-min.js"></script> 
<title>Test.svg</title> 
<style> 
body {max-width:62em;margin:0 auto;overflow-y:scroll;} 
main {background: #ddd;} 
svg {background:#eee;border:1px dotted #3983ab;width:100%;height:auto;} 
</style> 
</head> 
<body> 
<main> 
<h1>Test responsiv SVG</h1> 
<div style="text-align: center"> 
<svg id="svgout" style="max-width:500px" viewBox="0 0 500 250" ></svg> 
</div> 
<script> 
var s = Snap('#svgout'); 
var c1 = s.circle(0,0,10).attr({fill: '#00f'}); 
function mausPosi(event, x, y) { 
c1.attr({cx: x, cy: y}); 
mC.attr({'text': x+'/'+y}); 
oL.attr({'text': s.node.offsetLeft}); 
}; 
s.mousemove(mausPosi); 
var oL = s.text(10,100, 'Offset...: '); 
var mC = s.text(10,150, 'mouseCoord:'); 
</script> 
</main> 
</body> 
</html>

對於圈中的正確的方式，我不得不SVG。減去的左上角的座標mousecurser以下。鼠標事件返回SVG相對於body（main）的座標。對於元素（圓圈），高點座標是（0/0）。

Ian，我發現jsfiddle.net/xJ4Lj/36/（yours？）與s.node.offset ...只有SVG容器保持在瀏覽器視口左側才能正常工作。附加文本中的返回值未定義。

來源

2017-03-28 D.Mietke

你能澄清一下你想幹什麼？即使使用響應式設置和Snap處理程序，也不必擔心偏移量等問題。 – Ian

你好伊恩，我編輯了我的問題，以澄清 –

有些東西似乎誤入歧途x，y應該是相對於svg容器，可能會彈出一個jsfiddle？ – Ian

當屏幕座標與svg元素存在差異時，我們需要在點上對svg座標空間進行變換。我們可以從element.getScreenCTM（）給出的矩陣中找到它。

這有點複雜，所以我通常使用我製作的插件，只是在創建Snap紙張實例之前將其包含在頂部。基本上創建一個svg點，找到從屏幕到svg文件的轉換的逆矩陣，然後使用它對點進行轉換。

Snap.plugin(function(Snap, Element, Paper, global) { 

    Element.prototype.getCursorPoint = function(x, y) { 
      var pt = this.paper.node.createSVGPoint();  
      pt.x = x; pt.y = y; 
      return pt.matrixTransform(this.paper.node.getScreenCTM().inverse()); 
    } 

}); 

... 

function mausPosi(event, x, y) { 
    var cpt = s.getCursorPoint(x,y) 
    c1.attr({cx: cpt.x, cy: cpt.y}); 
};

jsfiddle

來源

2017-03-29 20:06:46 Ian

你的回答對我來說非常有益，我必須花一些時間來詳細瞭解。結果工作正常。使用ActionScript 2（3），Snap.SVG比Flash更復雜。感謝時間和耐心。 –

Snap.SVG s.node.offsetLeft [Top]未定義？

回答

相關問題