SVG Script in Firefox troubles
Dale Ellis <[email protected]> Mon, 12 Oct 2009 06:22:40 -0700 (PDT)
| Newsgroups | gmane.comp.mozilla.devel.svg |
|---|---|
| Organization | http://groups.google.com |
| Message-ID | <9de75d35-cb8a-41ff-a2f2-9e3e15028c90@d10g2000yqh.googlegroups.com> |
Hi all,
I have been using SVG for about 6 years now, so I thought I have a
fairly good grasp of SVG but I have never created SVG for use for
anything other than Adobe.
I have created a Gantt chart in SVG in which there I have a fair
amount of ecmascript to perform dragging expanding of groups of tasks,
hover tips etc... It works like a dream in IE and have never need to
get it working in any other browser, nor did I think Firefox even
support ecmascript in its SVG, however as I have some spare time on my
hands I thought I would try and see if I can get it work in Firefox.
Now in the error console I was getting various errors, which after
googling I have rectified, I made these set of changes to make them
errors go away...
Replaced "svgdoc = evt.getTarget().getOwnerDocument()" with "svgdoc =
evt.target.ownerDocument;"
Replaced calls on element objects to "getStyle()" with "style".
Changed setAttribute and createElement to there namespaces equivalent
However, in Firefox, setting of attributes, properties or creating
elements done seem to work and I don’t know why
Firstly setting attributes, this does nothing in FF..
var currentId = null;
function displayHover(evt, passedid, desc, descpart, start, end,
actEnd, taskActive, projectId) {
if (passedid != currentId) {
currentId = passedid;
taskDescription.data = desc;
taskDescriptionLine.data = descpart;
startTime.data = start;
endTime.data = end;
hovProjId.data = projectId;
if (!taskActive) {
endActTime.data = 'Not Started';
endActTimeObj.style.setProperty("fill", "#000000", "");
} else if (actEnd == null) {
endActTime.data = 'Currently Active';
endActTimeObj.style.setProperty("fill", "#00AA00", "");
} else {
endActTime.data = actEnd;
endActTimeObj.style.setProperty("fill", "#000000", "");
}
hoverBox.style.setProperty("visibility", "show", "");
}
var node = evt.target;
var newX = (parseInt(node.getAttribute("x"), 10) + 10);
var newY = (parseInt(node.getAttribute("y"), 10) + 30);
newX += currentScrollX;
newY += currentScrollY;
var newCoords = "translate("+ newX +", "+ newY +")";
hoverBox.setAttribute("transform", newCoords);
}
Creating a new element doesn’t seem to do anything…
function drawLine(x1, y1, x2, y2) {
var newLine= svgdoc.createElementNS(SVG_NS, 'line');
newLine.setAttributeNS(null, 'class', 'thinBlackLine');
newLine.setAttributeNS(null, 'x1', x1);
newLine.setAttributeNS(null, 'y1', y1);
newLine.setAttributeNS(null, 'x2', x2);
newLine.setAttributeNS(null, 'y2', y2);
svgdoc.getElementById('taskDependecies').appendChild(newLine);
}
Anyone know, what I am doing wrong? can these things even be done in
FF?, I am at a loss here, and I can not find anything useless on the
net on this.
Thanks,
Dale