Question

我有一张svg地图。如何使用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 map这个标签：

<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显示：阻止，但实际上当我把鼠标放在我的线上时它是不可见的。

Answer 1

没有像foreignObj这样的元素。

SVG有一个 foreignObject 元素，您可以像这样创建它......

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

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

1 个答案: