<?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"
     onload="document.documentElement.getBoundingClientRect();
	     document.getElementById('x').textContent = 'New text'">

  <foreignObject x="200" y="180" width="100" height="50" >
    <html:button id="x">Old long long long text</html:button>
  </foreignObject>

  <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" />
	
  </g>

</svg>