Панель посредством SVG

Панель в данном примере можно увеличить и вернуть в исходное состояние щелчком на кнопке "±", а также закрыть щелчком на "x". Однако закрытие панели установкой стилевого параметра display:none не работает в IE с плагином Adobe SVG Viewer.

SVG-код:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="410" height="170"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Окно</title>
<style>
<![CDATA[
	text {font-size:11px;
            font-family:Arial }
]]>
</style>
<script type="text/javascript">
<![CDATA[
function winresize(){ // масштабирование панели
  var x=document.getElementById('win');
  var y=x.getAttribute("transform");
  if (y=="matrix(1.2 0 0 1.2 0 0)"||
          y=="matrix(1.2, 0, 0, 1.2, 0, 0)")
     {y="matrix(1 0 0 1 0 0)"}
  else
     {y="matrix(1.2 0 0 1.2 0 0)"}
  x.setAttribute("transform",y)
}
 
function winclose(){ // скрыть панель
  document.getElementById('win').style.display='none'
}
]]>
</script>

<defs>
    <linearGradient id="Gradhead"
         x1="0%" y1="0%" x2="0%" y2="100%">
       <stop offset="0" style="stop-color:#0000a0"/>
       <stop offset="40%" style="stop-color:#60c0f0"/>
       <stop offset="60%" style="stop-color:#60c0f0"/>
	 <stop offset="100%" style="stop-color:#0000a0"/>
    </linearGradient>
</defs>

<desc>Панель новостей</desc>
<g id="win"  style="display:block">
  <desc>Тень</desc>
  <rect x="24" y="14" width="315" height="130"  rx="8" ry="8"
    fill="#808080" fill-opacity="0.3"/>
  <desc>Панель</desc>
  <rect x="20" y="10" width="315" height="130"  rx="8" ry="8"
    fill="#e0f0ff"  stroke="#00a0ff" stroke-width="1px"/>
  <desc>Заголовок</desc>
  <rect x="20" y="10" width="315" height="22"  rx="8" ry="8"
    fill="url(#Gradhead)" />
  <g><desc>Кнопка масштабирования</desc>
    <text x="303" y="24" fill="#ffffff"
       style="font-family:arial">±
    </text>
    <rect x="299" y="13" width="16" height="16"  rx="1" ry="1"
       title="Увеличить/уменьшить"
       fill="#ff0000" fill-opacity="0.5" stroke="#00a0ff"
       onclick="winresize()"/>
  </g>
  <g><desc>Кнопка закрытия</desc>
    <text x="321" y="24" fill="#ffffff" style="font-family:arial">x
    </text>
    <rect x="316" y="13" width="16" height="16"  rx="1" ry="1"
       title="Закрыть"
       fill="#ff0000" fill-opacity="0.5" stroke="#00a0ff"
       onclick="winclose()"/>
  </g>
 <text x="105" y="25" fill="#ffffff"
     style="font-family:arial;font-weight:bold;font-size:10px">
  Что нового на сайте?
 </text>

 <text x="30" y="50" id="news">
   <tspan>Вышла в свет моя книга</tspan>
   <tspan dx="-100" dy="12">"(X)HTML, скрипты и стили", 2009г.</tspan>
   <tspan x="30" dy="25">Добавлен материал по SVG</tspan>
 </text>
 <image id="newsimg" x="260" y="35" width="67" height="96" xlink:href="../../mybooks/xhtml.gif"/>
</g>
</svg>