Thursday, July 06, 2006

Follow up on inline SVG

This is just a brief follow-up to my previous request for help.

I had built my XSLT to render the SVG as described in the article, Render dynamic graphs in SVG and my mouseover coloring events was modeled after the article, Add interactivity to your SVG, which were both articles from developerWorks.

So, my generated code for a bar in my graph looked like:
<svg:rect x="35" y="272.88" height="57.12" width="109" style="fill:rgb(49,0,0)">
<set attributeName="fill" from="rgb(49,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
However, after taking the advice from Martin Honnen (SVG Developers Yahoo! Group) my generated code for the same bar in the graph looks like:
<svg:rect x="35" y="272.88" height="57.12" width="109" fill="rgb(49,0,0)" onmouseover="evt.target.setAttribute('fill', 'red');" onmouseout="evt.target.setAttribute('fill','rgb(49,0,0)');"/>
The result is that the correct colorings are now displayed when rendered inline in IE, and the mouseover events work correctly in Firefox.

The only thing still not working is the mouseover events when rendered inline in IE.

Martin Honnen further suggested to start with a blank SVG placed in the page with the embed tag, and then access it to manipulate it with the getSVGDocument method (which should work in IE, Firefox 1.5+, and Opera 9) to add the content. However, my attempts at this method have not been successful to date.

7 comments:

Ray said...

Have you tried using SVG gradients yet with this approach? I have and they seem to be broken with this approach. The gradient defs work when SVG content is browsed alone but for some reason this JS/DOM approach breaks gradients.

Have you had any luck with gradients?

Ray said...

Apologies for not clarifying, the gradient only seems to be broken in Firefox 2.0. It works in Opera 9 though.

Steven Pothoven said...

I confirm with you that gradients do not appear to be working in Firefox.

Similarly various other filters don't work either. For example, I've created a "3d-look" filter which includes a feGaussianBlur for a drop shadow and a feSpecularLighting for the embossing. It works in IE (Adobe SVG), Opera, and the Batik viewer, but not in Firefox.

DeiMoS said...

Steven I have the same problem. Even I also asked in "SVG Developers Yahoo! Group", and I get no answers. Finally did you fix it?

Daniel said...

Thank you so much; I've finally figured out how to get reliable functionality out of this.
1. Use js for *all* manipulations.
2. Do not use css or styling by class.

TheDoc8786 said...

I have been having a field day getting SVG MouseEvents to conform to both IE and Firefox standards! Your articles have helped out a lot, so I figured I would offer some help of my own since I had a similar issue with my own introductory project to SVG (View it here).

Basically, the issue was with MouseEvents in IE. Firefox worked fine, but for some reason IE did not recognize the 'onclick' attribute in any inline SVG. It would, however, recognize 'onclick' for the root <svg> tag (see: http://www.schepers.cc/inlinesvg.html).

My solution was to separate the SVG into an external document for IE (using PHP browser detection) and serve it through an HTML <embed> tag. At that point IE began recognizing my MouseEvents.

Hope this helps

Steven Pothoven said...

Thank you for the feedback!