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)">However, after taking the advice from Martin Honnen (SVG Developers Yahoo! Group) my generated code for the same bar in the graph looks like:
<set attributeName="fill" from="rgb(49,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
<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:
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?
Apologies for not clarifying, the gradient only seems to be broken in Firefox 2.0. It works in Opera 9 though.
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.
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?
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.
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
Thank you for the feedback!
Post a Comment