Question

我有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'

如何通过鼠标悬停在SVG文本上动态显示内容

0 个答案: