使用javascript在svg元素上创建dropdownmenu？

-2

我有一张svg地图。如何创建使用JavaScript的svg元素的dropdownmenu？使用javascript在svg元素上创建dropdownmenu？

var linegroup = svg.group(fullmap, 
       {id: 'line' + id, 'class': 'linePart', onmouseenter: 'ShowDescription(\''+ name +'\' ,\'' + description + '\' ,\'' + id + '\' , \'\', event)', onclick: 'RedirectLinePart(' + id + ')', onmouseout: 'HideDescription()'}); 

      svg.polyline(linegroup, [ @foreach(var p in linepoints){<text> [@p.coordX,@p.coordY], </text>}]); 

      svg.circle(linegroup, @linepoints.First().coordX, @linepoints.First().coordY, 1); 

      var foreignObj = document.createElement('foreignObj'); 

      var body = document.createElement('body'); 

      var newElement = document.createElement('div'); 
      newElement.setAttribute("class","floatingMenu"); //Set path's data 

      var newChild = document.createElement('div'); 
      newChild.setAttribute("class","floatMenuItem"); 
      newChild.textContent = 'Перейти к репортажам'; 

      newElement.appendChild(newChild); 
      body.appendChild(newElement); 
      foreignObj.appendChild(body); 
      linegroup.appendChild(foreignObj);

此代码插入到SVG地图这个标签：

<g id="line2" class="linePart" onmouseenter="ShowDescription('Вторая часть' ,'Вторая часть первой полной линии' ,'2' , '', event)" onclick="RedirectLinePart(2)" onmouseout="HideDescription()"> 
    <polyline points="60,425 75,415 89,400"></polyline> 
    <circle cx="60" cy="425" r="1"></circle> 
     <foreignobj> 
      <body> 
       <div class="floatingMenu"> 
        <div class="floatMenuItem">Перейти к репортажам</div> 
       </div> 
      </body> 
     </foreignobj> 
</g>

ShowDescription功能 - 当悬停行：

function ShowDescription(name, description, id, weather, event) { 
        $('#description').css('display', 'inline'); 
        $('#description #descrtitle').html(name); 
        $('#description #info').html(description); 
        $('#description #info').html(description).css('margin', '0px 0px 0px 10px');     
         var fe = event.target.childNodes[2]; //get <foreignobject> 

         var body = fe.childNodes[0]; 
         var menu = body.childNodes[0]; 

         $(menu).css('left', event.clientX+document.documentElement.scrollLeft)+'px').css('top',(event.clientY + document.documentElement.scrollTop)+'px'); 
         $(menu).show(); 
}

调试说floatmenu显示：块，但实际上它不是可见的，当我把鼠标放在我的线上。

来源

2014-07-16 Lev92

没有foreignObj这样的元素。

SVG有foreignObject元素，你会创建这样的...

var foreignObj = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');

来源

2014-07-16 20:55:05

使用javascript在svg元素上创建dropdownmenu？

回答

相关问题