как динамически показывать контент при наведении курсора на текст SVG - PullRequest
Новая
       32

как динамически показывать контент при наведении курсора на текст SVG

0 голосов
/ 18 апреля 2019

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

Я попробовал приведенный ниже код, но не знаю, как установить указатель мыши на атрибут style. 

setColoringAndText(){
    let elref;
    let id;
    let obj=document.getElementById('svg1');
    let svg2=obj.contentDocument.querySelector("svg");
    for(let i in this.data){
      id = 'l-rm-'+this.data[i].id;      
      // id=this.data[i].id; //tofill color complete block
      elref=svg2.getElementById(id);
      if(elref){
        if(this.data[i].available){
          elref.style="fill:green;";
        }else if(this.data[i].available === false){
          elref.style="fill:red;";
        }else if(this.data[i].locked){
          elref.style="fill:yellow; cursor: pointer"; // here I want to show information like why this room is locked on mouse hover
        }
      }
    }
  }
````````````````````````````````````````````````````````
to the style attribute I want to set some data to show on mousehover and also I am getting error now with the above code as below but still its working fine when I run on browser:
error TS2551: Property 'contentDocument' does not exist on type 'HTMLElement'
...