События мыши SVG работают в Firefox4, но не в IE8 - PullRequest
Новая
       20

События мыши SVG работают в Firefox4, но не в IE8

1 голос
/ 31 мая 2011

У меня есть автономный файл SVG и отдельный файл Javascript для обработки событий мыши, вызванных из файла SVG.Проекты хорошо работают с FF, но почему-то у меня возникли проблемы с IE при управлении событиями мыши: я получаю следующие сообщения об ошибке: « clientx равно нулю или нет объект ». Изображение SVG напечатано нормально.

Ребята, вы не знаете, что не так с моим кодом (см. Ниже)?

Спасибо ++

SVG документ 

<?xml version="1.0" standalone="no"?>
<svg width="1100" height="5990" version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" >
<script xlink:href="desc.js"/>

<g onmouseout="h(evt)">" stroke-width="1"/>
<polygon points="35,20 86,20 96,35 86,50 35,50" style="fill:grey"    onmousemove="s(evt,'someTxt')" onclick="m(evt, 'NGR_a00010')"/>
<polygon points="99,20 138,20 148,35 138,50 99,50" style="fill:grey" onmousemove="s(evt,'someTxt someTxt')" onclick="m(evt, 'NGR_a00020')"/>
</g>

<rect class="tooltip_bg" id="tooltip_bg"   x="0" y="0" rx="4" ry="4"  width="55" height="17" visibility="hidden"/> 
  <text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text> 
</svg>

Javascript 

function init(evt)
{
    if ( window.svgDocument == null )
    {
    svgDocument = evt.target.ownerDocument;
    }

    tooltip = svgDocument.getElementById('tooltip');
    tooltip_bg = svgDocument.getElementById('tooltip_bg');
}


function s(evt, mouseovertext)
{
    var posx = 0;
var posy = 0;
if (!evt) var e = window.event;
if (evt.pageX || evt.pageY)     {
    posx = evt.pageX;
    posy = evt.pageY;
}
else if (e.clientX || e.clientY)    {
    posx = evt.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
    posy = evt.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
}

  tooltip.setAttributeNS(null,"x",posx+11);
    tooltip.setAttributeNS(null,"y",posy+27);
    tooltip.firstChild.data = mouseovertext ;
    tooltip.setAttributeNS(null,"visibility","visible");

    length = tooltip.getComputedTextLength();
    tooltip_bg.setAttributeNS(null,"width",length+8);
    tooltip_bg.setAttributeNS(null,"x",posx+8);
    tooltip_bg.setAttributeNS(null,"y",posy+14);
    tooltip_bg.setAttributeNS(null,"visibility","visibile");        
}

function h(evt)
{
    tooltip.setAttributeNS(null,"visibility","hidden");
    tooltip_bg.setAttributeNS(null,"visibility","hidden");
}

  function g(evt, locus_tag)
  {
window.open("http://www.ncbi.nlm.nih.gov/gene?term=" + locus_tag);
  }


  function m(evt, txt)
  {
if (evt.type == "click" && evt.detail == 2)//if we got a double click, for some reason onblclick does not work
  {          
  window.open("http://www.ncbi.nlm.nih.gov/gene?term=" + txt);
      } 
  }

Ответы [ 2 ]

3 голосов
/ 31 мая 2011

IE8 не поддерживает SVG.

Существуют инструменты Javascript, которые могут помочь с этим, но изначально он не поддерживает его.

Из упомянутых мною инструментов мой любимый - Raphael, но Raphael - это библиотека для рисования графики; так как у вас уже есть SVG в вашем коде, вы можете найти более простую библиотеку преобразования. Возможно, что-то вроде этого: http://code.google.com/p/svg2vml/ или это: http://code.google.com/p/svgweb/

Поскольку вы говорите, что изображения SVG работают на вашей странице, я бы сказал, что вы, вероятно, уже используете тот или иной из этих инструментов (возможно, один из тех, которые я связал выше, возможно, другой - довольно их мало). Но я думаю, что инструмент, который вы используете, не включает поддержку манипулирования объектом SVG с помощью Javascript.

Поэтому, возможно, вам придется попробовать другой инструмент, если вы хотите эту функцию.

1 голос
/ 31 мая 2011

Как сказал Спадли , IE8 не поддерживает SVG.

Если изображение появляется на вашей странице, есть несколько возможностей:

  • Что-то в вашем стеке разработки может преобразовывать его в растровое изображение (например, PNG): щелкните правой кнопкой мыши изображение и выберите «Свойства», а затем посмотрите, какое значение указано для «Тип».
  • Возможно, у вас естьустановлен плагин для браузера, который отображает SVG (но не предоставляет интерфейс JavaScript).Попробуйте запустить IE8 в безопасном режиме.

Internet Explorer 9 поддерживает SVG, однако обновление IE, по возможности, решит эту проблему.

...