On Apr 9, 2013 7:40 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote: > > Hi, > > Here is some more experimental work based on FXG to SVG transformation. > > http://people.apache.org/~bigosmallm/fxg2svg/buttonskinjs/embedButtons.html > > This time, all the skin states are in one .svg file along with the JS: > > http://people.apache.org/~bigosmallm/fxg2svg/buttonskinjs/buttonSkin.svg > > Notes: > > * My earlier approach of using each .svg file as a background of each button state has a major problem - it is not runtime scriptable because of security restrictions. > * In this version, I am using the <embed> tag with the src attribute pointing to the .svg skin. > * Inside the SVG, the states are being managed using JavaScript > * The button's label and click callback function is injected into the SVG file via the embed tag's attributes. > * Inside the SVG, the onInit() function reads the window.frameElement.attributes properties to read and set the required variables > * Chrome and Firefox restrict accessing window.frameElement when working on the filesystem (cross domain scripting security precaution) But it works fine when running from a server. I will figure out a way around this for development ease soon. > * Communication from SVG to the parent HTML is done via calling top[injectedCallbackFunctionName](); > * In this function call, we can send any parameters we choose. For now, I am sending the the original MouseEvent and the this (SVG window) object. > * In the HTML page, the embed objects are styled via CSS as usual. > * Tested to work fine with Firefox, Chrome and Android Browser. I will test with IE9 and iOS in a bit. If someone can test it in the meantime, that would be great. > * I need to play with the "pointer-events" property of the SVG objects to improve the hit area of the button. In Chrome, clicking on the text seems to work, but not on the button background.
A simple rect with no fill and pointer-events set to 'all' did the trick. And testing on iOS worked fine as well. Thanks, Om > > Please let me know your feedback on this approach. > > Thanks, > Om
