Snap.SVG s.node.offsetLeft [Top] is undefined? -


in snap.svg need position of svg container left upper corner. needed coordinates with

s.mousemove(movefunc)

but relative position of html body. html document responsive. result useing

s.node.offsetleft

or

s.node.offsettop

is undefined. svg container id , use of 

document.getelementbyid('usedid').offsetleft

or other offset... give 'undefined'. results independent of browser. far couldn't find usefull answer or example. hope help.

for completion ian's answer. html body ist centered viewport of browser , contents responsible. svg container should centered in body. mousemove event gives me correct coordinates relative viewport. if want example svg grafic element follow mouse or placed @ mousepointer need relative coordinates of svg container's upper left corner , not absolut coordinates x=0 , y=0. how can these coordinates? absolut positioned html element can needed offsets not svg.

sorry, tried jsfiddle unsuccessful. here the code used:

<!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>

for circle following mousecurser in correct way have substract coordinates of upper left corner of svg. mouse event return coordinates inside svg relativ body (main). element (circle) coordinates of upper point ist (0/0).

ian, found jsfiddle.net/xj4lj/36/ (yours?) s.node.offset... working if svg container remains left of browsers viewport. returned value in additional text gives undefined.

when there differences screen coordinates svg element, need transformation on points, svg coordinates space. can find out matrix given element.getscreenctm().

it's little bit complex, typically use plugin made, include @ top before create snap paper instance. create svg point, find inverse matrix of transformation screen svg paper, , transformation on points using that.

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


Comments

Post a Comment

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

this addentry blog page have made scratch , there underlying problems code particularly clear button supposed clear text entered when button clicked on doesn't work have saved html file problem. also 1 other problem submit button works doesn't pass of text index file have written php , reason whenever click on submit button redirects me index page without posting entry have made. <!doctype html> <html> <head> <script> function message() { alert("clear form?"); } </script> <style> body {background-color: beige;} h1 {color: black;} p {color: black;} textarea { width: 50%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: white; font-size: 16px; resize: none; } div { padding-left: 20px; } </style> </head> <meta charset="utf-8"> <link rel="stylesheet" href=".
Read more

c# - Selenium Authentication Popup preventing driver close or quit -

i have selenium automated task setup login website retrieve information. it's basic in automation. logging in , clicking 2 links. running issue proving problem. the site in question uses authentication required popup not javascript popup rather regular windows auth popup. have read isn't handled out of box selenium. i using " http://username:password@url.com " site every , site has issues on end prompt me again username/password randomly. have enter username/password twice in row when navigating there hand. since task loops continuously few hours picking needed info figured use webdriverwait verify element present on page. if authentication popup appears, element isn't present. no need care run, start over. the problem having when authentication popup displayed , hit timeout limit want close driver/browser window can start task on again. however, driver.close() , driver.quit() not doing anything. browser remains open , unloaded page still there login p
Read more

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -

i'm geting started tensorflow,followed tutorials,but cannot download mnist data. import tensorflow tf tensorflow.examples.tutorials.mnist import input_data mnist=input_data.read_data_sets("mnist_data/",one_hot=true) print("download done!") error information: extracting mnist_data/train-images-idx3-ubyte.gz traceback (most recent call last): file "/home/sj/program/tesorflow_try.py", line 6, in <module> mnist=input_data.read_data_sets("mnist_data/",one_hot=true) file "/usr/local/lib/python2.7/dist-packages/tensorflow/contrib/learn/python/learn/datasets/mnist.py", line 213, in read_data_sets train_images = extract_images(f) file "/usr/local/lib/python2.7/dist-packages/tensorflow/contrib/learn/python/learn/datasets/mnist.py", line 60, in extract_images buf = bytestream.read(rows * cols * num_images) file "/usr/lib/python2.7/gzip.py", line 268, in read self._read(readsize) file
Read more