<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:html="http://www.w3.org/1999/xhtml" height="500" 
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <!-- switch -->
    <foreignObject x="200" y="180" width="100" height="50">
	  <html:button onclick="alert('boo!');">This is a wide button</html:button>
    </foreignObject>
  <!-- /switch -->

  <!-- switch -->
    <foreignObject x="220" y="220" width="500" height="300" style="overflow:hidden;">
	  <html:div style="background-color: red; font: 40pt sans-serif;" >
	  The quick brown fox jumps over lazy dog</html:div>
    </foreignObject>
  <!-- /switch -->
  
  <!-- switch -->
    <foreignObject x="100" y="100" width="400" height="200" style="overflow:hidden;">
	This is just some text
    </foreignObject>
  <!-- /switch -->

  <g transform="rotate(10) translate(-100) scale(0.8)">
    <polygon style="fill:red; fill-opacity:0.5;"
	  points="350, 75 379,161 469,161 397,215
	  423,301 350,250 277,301 303,215
                     231,161 321,161" />
	
    <polygon style="fill:lime; stroke:blue; stroke-width:10; fill-opacity:0.5;"
	  transform="translate(-100)"
	  points="850,75  958,137.5 958,262.5
	  850,325 742,262.6 742,137.5"/>
  </g>

  <!-- switch -->
    <foreignObject x="100" y="150" width="200" height="200">
      <html:div>
        <xul:button flex="1"  oncommand="alert('boo');"  label="XBL button"/>
      </html:div>
    </foreignObject>
  <!-- /switch -->
</svg> 
