Adding behaviour with XBL Adding behaviour with XBL Apart from aggregating content, XBL can also attach behaviour (methods, events) to tags in an object-oriented way Support for inheritance bindings.css face { -moz-binding: url("bindings.xbl#face"); } bindings.xbl <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:svg="http://www.w3.org/2000/svg"> <binding id="face" extends="svg:generic"> <content> <svg:g xbl:inherits="style, transform" > <svg:circle cx="100" cy="100" r="120"/> <svg:circle cx="50" cy="50" r="10" style="fill:black;" /> <svg:circle cx="150" cy="50" r="10" style="fill:black;" /> <svg:path d="M50,150 Q100,200 150,150" style="fill:none; stroke:black; stroke-width:10;" /> </svg:g> </content> <implementation> <method name="makeSad"> <body> // move controlpoint of quadratic bezier element: var quad = this.inner.lastChild.pathSegList.getItem(1); quad.y1 -= 10; </body> </method> <property name="inner" readonly="true"> <getter> return document.getAnonymousNodes(this)[0]; </getter> </property> </implementation> <handlers> <handler event="mousedown"> this.makeSad(); </handler> </handlers> </binding> </bindings> faces.xml <?xml-stylesheet href="bindings.css" type="text/css"?> <svg xmlns="http://www.w3.org/2000/svg"> <face transform="translate(100,100) scale(.5)" style="fill:blue;"/> <face transform="translate(200,300) scale(.3)" style="fill:yellow;"/> <face transform="translate(70,250) scale(.4) rotate(30,100,100) " style="fill:red;"/> <face transform="translate(250,110) scale(.4) skewX(30) " style="fill:green;"/> </svg>