SVG tooltips and style setting

Last weekend, I landed a couple of fixes to improve the integration of SVG with existing Gecko functionality. (To be exact, Takeshi Kurosawa and I fixed bug 329212 and bug 374216)  These improvements are both available in nightly builds.

In particular, we now support setting SVG element.style.property values e.g. element.style.fill=”green”. This feature was sufficiently popular that Google’s SVG Web project took the time to patch Firefox to implement this whenever it was loaded. It’s possible that this change may cause some pages written to target Microsoft Explorer filter implementation to display strangely since a test like if (element.style.filter) will now pass in both IE and Gecko. If you have such tests you may need to update them to ensure that they really do only catch IE.

We also display tooltips in SVG now by converting <title> elements into tooltip text so you won’t need to roll your own tooltips in future.

Advertisements

8 responses to this post.

  1. Awesome! Thanks for the summary

  2. Excellent?

    Any hope of SVG support for <img> in the near future?

    • (Gah. “Excellent?” was supposed to be “Excellent!” I apologize for the apparent passive aggressive fake enthusiasm.)

  3. Cool, keep up the good work 🙂

  4. Posted by Colby Russell on February 14, 2010 at 7:26 pm

    It’s possible that this change may cause some pages written to target Microsoft Explorer filter implementation to display strangely since a test like if (element.style.filter) will now pass in both IE and Gecko. If you have such tests you may need to update them to ensure that they really do only catch IE

    Alternatively, instead of doing

    if (element.style.filter) {
      isIE = true;
    }

    just do

    if (element.style.filter) {
      // do whatever it is you want to do with element.style.filter
    }
    else {
      // do the fallback
    }

    Things will continue working, even as support is added. Best of all, if Mom’s Friendly Browser Company releases a browser next week that does or doesn’t support the style object model for SVG filters, it’ll work for their users, too.

    Not only is it the right way, this should be the lazy person’s preferred way; it means you are doing less work, since you aren’t running around patching everything when a browser changes its behavior. I don’t get the aversion to this approach. Instead, people like to be the creators of their own hardships.

    • This is actually a bad idea. At Opera, we’ve seen this problem (since we support this stuff already) and we’re considering hiding style.filter like we hide document.all.

      Are you sure your suggested code will work without browser detection? I haven’t spent too much time on this, but..

      if (element.style.filter) {
      // do whatever it is you want to do with element.style.filter
      // .. except that this code will also run in IE6, maybe IE 5.5 -
      // are you sure you can do "what you want to do with element.style.filter" in those?
      }
      else {
      // do the fallback
      }

      Some more examples might help developers understand the issue.

  5. Nice work Robert! Yet another good good improvement to the Mozilla code to add to the very long list of other improvements that you’ve made. Thank you for all the time and hard work you put in! Thanks also to Takeshi for his work on the bug!

Comments are closed.

%d bloggers like this: