aleofreddi / svgpan Goto Github PK

"Unable to get property 'setAttributeNS' of undefined or null reference"


What version of the product are you using? On what operating system?
- Version 1.2.2, Windows 7. Tested with both IE10 and Chrome.


/**
 * Sets attributes of an element.
 */
function setAttributes(element, attributes){
    for (var i in attributes)
        element.setAttributeNS(null, i, attributes[i]);
}

What steps will reproduce the problem?

Load SVG in Firefox 19 in Ubuntu 10.04
SVG used: https://dl.dropbox.com/u/15637409/emto_nanopub_author_theses.svg

What is the expected output? What do you see instead?

Expected: to be able to zoom and drag. That's not possible.

Instead I see in the error console: TypeError: matrix is null
Quelldatei: https://dl.dropbox.com/u/15637409/SVGPan.js
Zeile: 145

Please provide any additional information below.

Functionality is flawless in Chromium. No errors reported. IIRC, Firefox 18 
worked (but I have modified the SVG in between, so I can't be 100 % sure).

What steps will reproduce the problem?
1. SVG that worked perfectly in 1.2.1 now broken, says matrix is undefined, 
which I think comes from the differences in the getCTM() usage.


What is the expected output? What do you see instead?
Throws error, no JS functionality at all.

What version of the product are you using? On what operating system?
Previously SVG pan 1.2.1, in firefox 5, win xp

Please provide any additional information below.

What steps will reproduce the problem?
1. Open http://www.sitepoint.com/examples/svg/thewall.html in Chrome 
17.0.963.79 on Ubuntu

What is the expected output? What do you see instead?

Expected: The .svg overlay should expand to fill the screen

Actual: The .svg fills the screen vertically, but remains square.


What version of the product are you using? On what operating system?

Chrome 17.0.963.79 on Pinguy Eee, based on Ubuntu 10.04

Please provide any additional information below.

This site seems to work under Chrome for Windows.

If you add a viewbox to the root SVG element and a size, which is common where 
the default view is to scale to fit, zooming and panning produce erratic 
behaviour.

The attached patch fixes this issue.  It requires the ViewBox.js library from 
http://www.kevlindev.com/gui/utilities/viewbox/index.htm 

What steps will reproduce the problem?
1. Try to zoom using the mousewheel
2. Click any of the object for dragging
3. The Mouse cursor goes far beyond the objects

What is the expected output? What do you see instead?
The object should go with the cursor while dragging, like here: 
http://www.cyberz.org/projects/SVGPan/tiger.svg 

What version of the product are you using? On what operating system?
SVGPan library 1.2.2; 

Please provide any additional information below.
I've used all the latest SVGPan codes but the problem still remains

See the attached file below how cursor goes far from the objects while dragging.

Moving individual elements was an unexpected default behavior.  The attached 
patch disallows moving individual elements by default, but provides a function 
to configure the behavior.

What steps will reproduce the problem?
1. open embedded svg in mobile safari or chrome.

What is the expected output? What do you see instead?

Click and drag in any direction is expected.

Scrolling/ panning with finger on mobile Safari browser sometimes locks into 
vertical or horizontal panning. On the desktop browser this does not happen 
with click and drag.

What version of the product are you using? On what operating system?
SVGPan 1.2.2
iOS 6.1.3 mobile safari and mobile chrome


Please provide any additional information below.
Three files attached which are used to recreate the issue. 
It seems like it might have something to do with touch on mobile, as both 
safari and chrome on iPad have the same issue.

What steps will reproduce the problem?
1. Start demo page under MsIE11 http://www.cyberz.org/projects/SVGPan/tiger.svg
2. Try to zoom with the mousewheel

What is the expected output? What do you see instead?
The SVG should be zoomed but nothing happens


What version of the product are you using? On what operating system?
MSIE11 64b, Ms Windows7 64b

The MSIE11 user agent string has changed. It is no longer presented as IE but 
as Mozilla like web browser.

A quick fix is to add MSIE11 detection during wheelmouse event listener init.

In SVGPan.js

var isIE11 = !!navigator.userAgent.match(/Trident\/7\./);
    if ((navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) || isIE11)
        window.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari/MsIE11

What steps will reproduce the problem?
1. Add "use strict"; to the javascript source code.

What is the expected output? What do you see instead?
No warning or errors in Firebug running Firefox 4.01

Three error pop up:
1. property name onmouseup appears more than once in object literal
function setupHandlers(root){
        setAttributes(root, {
                "onmouseup" : "add(evt)",
                "onmousedown" : "handleMouseDown(evt)",
                "onmousemove" : "handleMouseMove(evt)",
                "onmouseup" : "handleMouseUp(evt)",
I do not know how to solve this problem, other than commenting out the 
add(evt). What is the line doing anyway?

2. assignment to undeclared variable i line 114
 for (i in attributes) 
 correction is:
 for (var i in attributes) 
Otherwise i is global.

3. stateTf is undefined
 stateTf = stateTf.multiply(k.inverse()); in line 149
  StateTf is declared in line 58. 
I do not know what the problem is. 

It would be nice if someone could correct the problems.

Thank you

patch for IE9

What steps will reproduce the problem?
1. Create a html document containing a SVG element (not positioned in the top 
left corner!)
2. Try to zoom using the mousewheel

What is the expected output? What do you see instead?
The zoom should go "into" the cursor, like here: 
http://www.cyberz.org/projects/SVGPan/tiger.svg Instead, when zooming in, the 
image drifts away in one direction.

What version of the product are you using? On what operating system?
SVGPan library 1.2.2; Probably all browsers are affected.

The following seems to work, but needs jQuery and changes to SVGPan.js:

Change the function getEventPoint() to:


function getEventPoint(evt) {
    var p = root.createSVGPoint();

        var errorX = $("#mydiv").offset().left-$(window).scrollLeft();
        var errorY = $("#mydiv").offset().top-$(window).scrollTop();

    p.x = evt.clientX-errorX;
    p.y = evt.clientY-errorY;

    return p;
}

Whereas "mydiv" is the id of the div, containing the svg-tag.

What steps will reproduce the problem?
SVGPan doesn't work on this site using Firefox. 
http://clearchannelairport.dk/new/webmap

What is the expected output? What do you see instead?
Try to access the site in Safari, Chrome or IE9 to see how it should work.

What version of the product are you using? On what operating system?
I'm using SVGPan 1.2.2 on OSX 1.7.4 (Lion)

If I use SVGPan together with an SVG which uses a viewBox attribute on either 
the root <svg> element or the top-most <g> element the behaviour of SVGPan is 
erratic in both Google Chrome and Firefox.

Any event including mouse-move, mouse-click and mouse-wheel cause the displayed 
image to get smaller, with no way to get it back.

This is a serious problem because it makes it very difficult to get the SVG 
image to scale to fit the available space by default - which is normally why 
the viewBox attribute is used.  Alternative approaches using 
transform="scale(x)" can be made to work, but it can be very cumbersome to 
compute the required scale.

The handling of viewBox in the getRoot() function doesn't seem to have the 
desired behaviour.

What is the expected output? What do you see instead?

I expect the viewBox attribute on the <svg> or topmost <g> element to be 
respected when initally displaying the SVG.

Otherwise, thanks for a very useful library!

What steps will reproduce the problem?

1. install google chrome 13
2. open http://www.cyberz.org/projects/SVGPan/tiger.svg
3. zoom works but pan not!

What is the expected output? What do you see instead?

doesnt pan

What version of the product are you using? On what operating system?

SVGPan library 1.2.1 on Google Chrome 13.0.782.107 on Ubuntu 10.04

Please provide any additional information below.

or do I have to send a bug report to google chrome team??

The default zoom sensitivity feels too insensitive for my taste.  The attached 
patch increases the zoom sensitivity, as well as providing a way to configure 
it.

What steps will reproduce the problem?
1. Open attached SVG
2. Try zooming
3. Try panning

What is the expected output? What do you see instead?
Zomming works (in Chrome), but panning does not.

What version of the product are you using? On what operating system?
Current version, tried in Chrome and Firefox.
In Chrome only zooming works.
In Firefox, nothing works.

Please provide any additional information below.

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>

What steps will reproduce the problem?
1. Create an svg with top level like:

<svg width=400 height=400 viewBox="0 0 10000 6000">
<g id="g" transform="scale(1 1) rotate(0) translate( 5 6000 )">...</g>
</svg>

2. Attempt a scaling transformation via mouseWheel


What is the expected output? What do you see instead?

The view should scale around the mouse cursor point.  Instead, the scaled view 
jumps to a new point.


What version of the product are you using? On what operating system? Top of 
tree.  I'm actually using jquery-svgpan, but the critical routines are the same.


Please provide any additional information below.

The problem arises because the setCTM routine does not take into account the 
viewBox transformation.  I was able to fix this set of problems by substituting 
the following implementation of setCTM:

setCTM = function (element, matrix) {
    element.transform.baseVal.consolidate();

    // The goal is to set element.transform to some matrix T='mat2' 
    // such that the new CTM is equal to the given input matrix.  The 
    // expression we need for 'mat2' is 
    //   T=(newCTM)*(inverse(oldCTM))*oldT .
    var mat2 = element.transform.baseVal.getItem(0).matrix.multiply(element.getCTM().inverse()).multiply(matrix);
                    element.transform.baseVal.replaceItem(element.transform.baseVal.createSVGTransformFromMatrix(mat2), 0);
},

What steps will reproduce the problem?

Setup SVGweb and put svgpan into it.

What is the expected output? What do you see instead?

svgpan does not work. It should.

Please use labels and text to provide additional information.

While trying to use an SVG image with a Viewport set and svgpan 1.2.2 I'm 
unable to move/zoom the SVG.

Firefox outputs lots of "matrix is undefined" errors to the console from the 
setCTM line in getRoot().  This appears to be because Firefox is behaving 
differently (to say Chrome) on the call to t.getCTM().  There is some 
discussion about the issue in a Firefox bug report at 
https://bugzilla.mozilla.org/show_bug.cgi?id=543965

As a result of that bug report I've found I can fix the issue by changing line 
115 in version 1.2.2.

From:
  setCTM(r, t.getCTM());

To:
  setCTM(r, t.getCTM() || t.getScreenCTM());

What steps will reproduce the problem?
1. Zoom in on an SVG with text element
2.
3.

What is the expected output? What do you see instead?
Proper scaling on text, however text does not scale.

What version of the product are you using? On what operating system?

Latest, all OS's with chrome have same issue.

Please provide any additional information below.

What steps will reproduce the problem?
1. Using the sample lion.svg, remove the 'id="viewport"' attribute. 

What is the expected output? What do you see instead?
When the element with id="viewport" is not found, the library should find the 
first g-element, and the functionality should still be available. But zooming 
and panning is not available.

What version of the product are you using? On what operating system?
Version 1.2.2 in Firefox 15.0.1 on Mac OS 10.6.8.

Please provide any additional information below.
Resolved by modifying function getRoot():
Original:
    var r = root.getElementById("viewport") ? root.getElementById("viewport") : root.documentElement, t = r;
Fixed:
    var r = root.getElementById("viewport");
    if (!r) r = root.documentElement.getElementsByTagName ('g')[0];
    var t = r;

What steps will reproduce the problem?
1. Look at attached file with SVGPan.js in same folder
2. Try to zoom
3. Try to pan

What is the expected output? What do you see instead?
Zoom and pan should work fine but they do not.  Instead, image is translated to 
the bottom left.


What version of the product are you using? On what operating system?
Current (March 7th, 2012)
Recent Chromium, recent Chrome and IE9 all show same issue.

Please provide any additional information below.
This file contains nested SVG elements in order that the graphic is initially 
centered in the browswer window.  I suspect this is confusing SVGPan.  For 
convenience, file contents below:

<svg height="100%" id="outer" style="position=absolute;display=block;" 
version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
 <svg x="50%" y="50%" overflow="visible" id="inner">
  <script xlink:href="/static/SVGPan.js">
  </script>
  <g id="viewport" transform="scale(1) translate(-224, -128)">
   <rect height="256" style="fill:grey;stroke:black;" width="448"/>
  </g>
 </svg>
</svg>

The image does not zoom in these browsers. It works fine in chrome and Firefox 5

Hi, thanks for your script, SVGPan makes my life easier!
Anyway, I use it for an interactive story with a lot of illustrations, and at a 
point, I wanted block the dezoom at 100% (like this, the svg is never smaller 
that its original size).

I did it by replacing the line 145 (the setCTM function) by this one:

var s = "matrix(" + Math.max(1,matrix.a) + "," + matrix.b + "," + matrix.c + 
"," + Math.max(1,matrix.d) + "," + Math.min(0,matrix.e) + "," + 
Math.min(0,matrix.f) + ")";

I don't know if it's the better way, I'm kind of newbie in javascript, but if 
someone else need it, it can be useful :)

What steps will reproduce the problem?
1. <span ng-include="'svg/tiger.svg'"></span> 
2. insert id <svg id="svgCanvas" 
3. Change var root = document.getElementById('svgCanvas');
4. Link script at end of SVG </svg><script xlink:href="svgpan.js" />

What is the expected output? What do you see instead?
Uncaught ReferenceError: handleMouseMove is not defined 

Would like the script to be bound to the svg root and keep working 
independently from Angular if possible. Otherwise, what is the best strtegy to 
port it to Angular.

What version of the product are you using? On what operating system?
AngularJS v1.2.9

Firstly: what a great project 

Second:
The library does not work with an svg with a <svg width=.. height=.. viewBox=.. 

the image grows when the mouse is moved over the image

Workaround remove width height and viewBox 
add a transform= to the first g element



Version: SVGPan 1.2.1  on Firefox 19.0.2 64 bit Centos 6

What steps will reproduce the problem?
1. i tried to use a svg with xlinks in it. loading this svg alone in browser it 
does work fine

What do you see instead?
Unfortunately, while SVGPan works very nicely, but without the xlinks, it fails 
completely 

What version of the product are you using? On what operating system?
latest (2014)
Mac Os X
TenFourFox, Safari 5

Please provide any additional information below.

Retirando a primeira linha funcionou no meu navegador. Antes não

What steps will reproduce the problem?
1. Grab you local thinkpad.
2. What keyboard combination will allow a zoom out / in sans the mouse
3.

What is the expected output? What do you see instead?

Zoom in / out


What version of the product are you using? On what operating system?

Latest.


Please provide any additional information below.

The script would be even easier to use if the root element was automatically 
selected, as opposed to relying on the hardcoded "viewport" id.

The attached patch changes the script to select the first <g> element in the 
document if a node with the "viewport" id is not found.

1. Click event is defined on the SVG
2. While dragging the SVG map, click events are fired
3. Is there any solution to prevent the click events after dragging?