Question

在Snap.SVG中，我需要SVG容器左上角的位置。我用

得到了所需的坐标

s.mousemove(moveFunc)

但它们与html体的位置有关。 html文档是响应式的。结果使用

s.node.offsetLeft

或

s.node.offsetTop

未定义。带有ID并使用

的SVG容器

document.getElementByID('usedId').offsetLeft

或其他偏移......也给出了未定义的＆＃39;。结果独立于浏览器。到目前为止，我无法找到有用的答案或例子。我希望得到一些帮助。

完成IAN的答案。 html主体以浏览器的视口为中心，内容负责。 SVG容器应该在体内居中。 mousemove事件为我提供了相对于视口的正确坐标。如果我想要例如SVG grafic元素将跟随鼠标或放置在鼠标指针上，我需要SVG容器的左上角的相对坐标而不是绝对坐标，其中x = 0且y = 0。我怎样才能获得这些坐标？对于absolut定位的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左上角的坐标。鼠标事件将SVG相对内部的坐标返回到主体（主）。对于元素（圆圈），上点的坐标为ist（0/0）。

伊恩，我用s.node.offset找到了jsfiddle.net/xJ4Lj/36/（你的？）...如果SVG容器仍然在浏览器视口的左侧，那么效果很好。附加文本中返回的值为undefined。

Answer 1

当屏幕坐标与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

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

1 个答案: