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를 만드시겠습니까?

답변

관련 문제