search

dianneg123 / svgpan

Automatically exported from code.google.com/p/svgpan
0 stars 0 forks source link

evt is not defined error with svg inlined in a html document #12

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. create a SVG inlined in a HTML document
2. add the <script xlink:href="SVGPan.js"/> directive before the first <g> tag
3. try to drag/drop the document

What is the expected output? What do you see instead?
The document should be drag/dropped. It does move and the javascript console 
display an "evt is not defined" error.

What version of the product are you using? On what operating system?
1.2.2. Also tried trunk version without success. Linux Ubuntu 10.04 with 
Firefox 7.0beta. Chrome 14 does not show any errors but it also does not work.

Please provide any additional information below.
Is the library supposed to work with inlined SVG?

My document looks like:

<html>... <div> <svg> ... 
<script xlink:href="SVGPan.js"/>
<svg>
<g>
...
</g>
</svg>
...
</html>

Original issue reported on code.google.com by pierre.a...@gmail.com on 28 Sep 2011 at 1:32

GoogleCodeExporter commented 9 years ago 
I noticed this today as well but the following does seem to be a work-around:

<html>
<body>
  <embed src="your.svg" type="image/svg+xml" />
</body>
</html>

Original comment by graham_a...@hotmail.com on 29 Sep 2011 at 3:43

GoogleCodeExporter commented 9 years ago 
You could get it to work by doing following three things. Hope it helps.

1. change the html code (as shown below)to move the library loading after svg 
tags have loaded; and also add an id to the svg element:

<html>... <div> <svg> ... 
<svg id='svgCanvas'>
...
<svg>
<script xlink:href="SVGPan.js"/>
</html>

2. Change the library code to set correct value for root variable:
// var root = document.documentElement;
var root = document.getElementById('svgCanvas');

3. Change the library code function setupHandlers as follows (mousewheel event 
now bound to root instead of document):

function setupHandlers(root){

//  if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
//      document.addEventListener('mousewheel', handleMouseWheel, false); // 
Chrome/Safari
//  else
//      document.addEventListener('DOMMouseScroll', handleMouseWheel, false); // 
Others

    if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
        root.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
    else
        root.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
}

Original comment by sara...@gmail.com on 13 Oct 2011 at 7:00

GoogleCodeExporter commented 9 years ago 
I was having the same problem. Making the above code changes corrected the 
problem for me.

Original comment by vmcmic...@gmail.com on 22 Oct 2011 at 4:04

GoogleCodeExporter commented 9 years ago 
Regarding comment 2 (step 3) see also my comment in another bugreport: 
https://code.google.com/p/svgpan/issues/detail?id=6#c2

Original comment by lukas.to...@htwchur.ch on 8 Feb 2012 at 11:12

GoogleCodeExporter commented 9 years ago 
Comment #2 works great. Made it work for me on Safari 6.1, without screwing up 
the scroll for the whole document. It makes much more sense to attach the 
mousewheel event listener to the SVG object, instead of attaching it to the 
document, when using inline SVG elements in your regular HTML.

Original comment by gilmar.a...@gmail.com on 21 Oct 2013 at 12:10

GoogleCodeExporter commented 9 years ago 
Anybody has a Angular directive that could help integrating with Angular

Original comment by claude.b...@gmail.com on 29 Jan 2014 at 4:44

GoogleCodeExporter commented 9 years ago 
Sara's (#2)Solution worked great, but took a lot of meddling with to get 
working.

Here is an exact version of what I did to get this to work, including working 
code:

test.html (also works with php) contents:
***START test.html contents***
<html>
<head>
<title>Test SVG with HTML</title>
</head>
<body>
<svg id="svgCanvas" height="1000" width="1000">
    <g id="viewport">
  <polygon points="0,0 1000,0 1000, 1000 0, 1000" style="fill:black;stroke:white;stroke-width:2"  fill-opacity="1" stroke-opacity="0.75" />
  <polygon name="randomshape" title="randomshape" points="2,2 200,2 195,5 170,11 154,22 133,30 135,32 133,34 132,40 128,54 121,60 119,62 118,64 120,67 125,75 110,79 105,82 95,92 92,92 90,94 2,94" style="fill:lime;stroke:green;stroke-width:3"  fill-opacity="0.5" stroke-opacity="0.3" />

    </g>

</svg>
<script src="SVGPan2.js" type="text/javascript"></script>
</body>
</html>
***END test.html contents***

For updated SVGPan2.js, please see attached. If you need access otherwise, 
reply in this thread and I will be able to provide other means of access.
- Includes root change
- Changes details for safari/Chrome
- No other changes were made.
Copy and save as Pansvg2.js and try testing with test.html. if it works then 
overwrite your Pansvg.js file with Pansvg2.js' contents, and appropriately 
re-reference. [For test.html reference is to the uploaded SVGPan2.js, so you do 
not have to overwrite your current script]Changes made to html was using 
<script src="SVGPan.js" type="text/javascript"></script> over xlink:. Notably 
the avoidance of using </script> over using ... /> caused many time consuming 
issues. Advise you switch to using </script>. The script only worked when this 
was not an xlink.

Things clarified:
You do not need any element except body around the svg.
You can only use SVGPan on one svg element unless you embed the elements (see 
#1)
The ID needs to always be that which is referenced in SVGPan.js, for the one 
you want to zoom.
The version=11 and SVG doc links in the svg tag are not needed,
also, the onmouseup="function(evt);" tags for mousemove, etc on the svg tag are 
also not needed.
No doc-type for the SVG is needed, you may use a html doctype (tested in 
firefox & chrome)

Original comment by Callofdu...@yahoo.co.uk on 21 Apr 2014 at 1:42

Attachments:

GoogleCodeExporter commented 9 years ago 
Thanks a lot for #7 :)
Got it working with minutes

Original comment by cartoonb...@gmail.com on 10 Aug 2014 at 10:24