SVG Script in Firefox troubles
Dale Ellis
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
Boris Zbarsky
> Hi all,
> However, in Firefox, setting of attributes, properties or creating
>
> Firstly setting attributes, this does nothing in FF..
> Creating a new element doesn�t seem to do anything�
...
> var newLine= svgdoc.createElementNS(SVG_NS, 'line');
What are you using for the "SVG_NS" constant?
Other than perhaps that, this looks like it should work just fine. What
Firefox version were you testing? Is a page showing the problem
publicly available somewhere?
-Boris
Dale Ellis
>
> Other than perhaps that, this looks like it should work just fine. What
> Firefox version were you testing? Is a page showing the problem
> publicly available somewhere?
>
> -Boris
Thanks for reply Boris,
Constant is set to this "http://www.w3.org/2000/svg" I have made a
little breakthrough since posting, visiblity needed to be set to
"visible" rather than "show", firefox likes thats. Now for the mater
of the lines not appearing, any ideas anyone? The element
'taskDependecies' is a <g> incase anyone wondered.
Thanks,
Dale
Boris Zbarsky
> Constant is set to this "http://www.w3.org/2000/svg" I have made a
> little breakthrough since posting, visiblity needed to be set to
> "visible" rather than "show", firefox likes thats.
Ah, yes. That's the value in the CSS spec, after all.
> Now for the mater of the lines not appearing, any ideas anyone? The element
> 'taskDependecies' is a<g> incase anyone wondered.
What values are you setting x1/y1/x2/y2 to? What CSS is bound to the
class you set?
-Boris
Dale Ellis
> What values are you setting x1/y1/x2/y2 to? What CSS is bound to the
> class you set?
>
> -Boris
Thanks Boris, spot on, you sent me in the right direction, i was
passing NaN values through in firefox, so drilling into it it turns
out that its because translate(0, 0) comes out as "translate(0)" when
i get the property which my code which extracts the x and y values
from couldn't deal with properly. Code made my robust and now its
workin gin IE and FF :o) so thanks very much!
I do have another question, how do you make the cursor be a hand? I
used to do it like this ...
<a xlink:href="">
<rect ................. onclick="doStuff();" />
</a>
Thats fine in IE but it causes FF the SVG to reload the page,which is
not the desired action? Do you know how to do this? I'm sure a few
years back there was no no cursor css property. Has that changed? is
there another way to get a hand? I tried preventing event propergation
on the doStuff event but that didnt work, which i didn't think it
would as its not really and event I trying to stop.
<a xlink:href="#">
<rect ................. onclick="doStuff();" />
</a>
I did try this, and this worked in FF but this causes IE to reload the
page :o(
TIA,
Dale
Boris Zbarsky
> I do have another question, how do you make the cursor be a hand?
"cursor: pointer" in CSS.
> <a xlink:href="">
You can probably toss in onclick="return false;" to make that work
across the board, but the CSS approach might be better.
-Boris
Dale Ellis
Thanks for you help again Boris, as I mentioned the cursor doesn't
seem to work in IE, its fine in FF. I had already tried onClick return
false previous to that. Did find a way around it <a
xlink:href="javascript:void(1);">
Its pretty much all working now in FF, just one small bit left, this
function doesn't seem to be working in FF, a function which draws a
triangle...
function drawTriangle(direction, x, y) {
var tri = svgdoc.createElementNS(SVG_NS, 'use');
tri.setAttributeNS('http://www.w3.org/2000/xlink/namespace/',
'xlink:href', '#'+direction);
tri.setAttributeNS(null, 'transform', 'translate('+ x +', '+ y
+')');
svgdoc.getElementById('taskDependecies').appendChild(tri);
}
Again, fine in IE, just checked the data coming through, all valid x
and y values, and valid id's in the direction field for pre defined
polygons.
Anything look wrong in there?
Boris Zbarsky
> tri.setAttributeNS('http://www.w3.org/2000/xlink/namespace/',
I have no idea where you got that namespace string. The right namespace
is "http://www.w3.org/1999/xlink".
The fact that this works in the Adobe SVG viewer is slightly astounding...
-Boris
Dale Ellis
Yea I really dont rememeber where I got that from, probably copied off
someones code off the web. Anyway, that had done the trick, thanks
very much Boris, brilliant help, its working perfectly in Firefox now!
Chris Lilley
BZ> On 10/13/09 5:36 AM, Dale Ellis wrote:
>> tri.setAttributeNS('http://www.w3.org/2000/xlink/namespace/',
BZ> I have no idea where you got that namespace string. The right namespace
BZ> is "http://www.w3.org/1999/xlink".
BZ> The fact that this works in the Adobe SVG viewer is slightly astounding...
Yes :) but I think I understand why ...
Due to it's age, ASV supported several older working drafts of SVG as well as the eventual recommendation. Early drafts had the namespaces declared as fixed attributes in the DTD, meaning they could not be changed (and did not need to be declared in the svg file itself).
It would have been better if they had removed support for old working draft features once the final Recommendation was released.
--
Chris Lilley mailto:ch...@w3.org
Technical Director, Interaction Domain
W3C Graphics Activity Lead
Co-Chair, W3C Hypertext CG
Boris Zbarsky
> Due to it's age, ASV supported several older working drafts of SVG as well as the eventual recommendation. Early drafts had the namespaces declared as fixed attributes in the DTD, meaning they could not be changed (and did not need to be declared in the svg file itself).
But in this case it's not a matter of using a namespace prefix without
declaring the namespace. This is a matter of using setAttributeNS with
an explicit namespace string... and the DOM implementation proceeding to
ignore that string and infer a namespace from the name of the attribute
instead. Or something.
I think we agree that ASV's pretty broken, though. ;)
-Boris
Chris Lilley
BZ> On 10/14/09 2:52 AM, Chris Lilley wrote:
>> Due to it's age, ASV supported several older working drafts of SVG as well as the eventual recommendation. Early drafts had the namespaces declared as fixed attributes in the DTD, meaning they could not be changed (and did not need to be declared in the svg file itself).
BZ> But in this case it's not a matter of using a namespace prefix without
BZ> declaring the namespace. This is a matter of using setAttributeNS with
BZ> an explicit namespace string... and the DOM implementation proceeding to
BZ> ignore that string and infer a namespace from the name of the attribute
BZ> instead. Or something.
True, and that is pretty broken.
BZ> I think we agree that ASV's pretty broken, though. ;)
Yup.
Chris Lilley
From: codedread <code...@gmail.com>
To: Chris Lilley <ch...@w3.org>
Date: Wednesday, October 14, 2009, 3:24:29 PM
Subject: SVG Script in Firefox troubles
===8<==============Original message text===============
On Oct 14, 2:33 am, Chris Lilley <ch...@w3.org> wrote:
> BZ> I think we agree that ASV's pretty broken, though. ;)
> Yup.
We definitely need to hasten the demise of ASV and provide IE
alternatives. Of course that was one of the main themes of SVG Open
this year.
The pluginless/shim approach :
* SVG Web: http://code.google.com/p/svgweb/
* AmpleSDK: http://www.amplesdk.com/
On the plugin side:
* Ssrc: http://www.savarese.com/software/svgplugin/
* Chrome Frame: http://code.google.com/chrome/chromeframe/
Unfortunately Chrome Frame does not automatically handle the SVG MIME
type so you'd have to add the meta tag in the HTML and dynamically
create your SVG elements using JavaScript. Hoping to get that fixed
one day: http://code.google.com/p/chromium/issues/detail?id=24257
Regards,
Jeff
===8<===========End of original message text===========
Forwarded with permission (Jeff mailed me asking that I do so; it was sent to myself rather than the list in error).