4

我有一个 SVG，它可以用作带有一些标题的顶栏。它由许多带有一些文本的矩形组成，当用户将鼠标悬停在它上面时，我想为每个矩形显示工具提示。

我试图实现这样的东西，但我需要将 .js 代码保存在单独的文件中，因为我正在动态生成我的 svg 文件。但是，当我将鼠标悬停在我的元素（svg 中的矩形）上时，什么也没有发生。我认为问题在于在脚本中引用我的 svg，但我不确定出了什么问题。

这是我的代码示例（我删除了一些不重要的部分以保持可读性。）

SVG：

    <svg contentScriptType="text/ecmascript" width="760" 
    xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css"
    height="140" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
        onload="init(evt)" version="1.0">
    <script xlink:href="script.js" xlink:actuate="onLoad" xlink:type="simple" xlink:show="other" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink"/><rect x="0" width="120" height="140" y="0" 
    style="fill:#DEE7EF"/><rect x="120" y="0" width="30" style="fill:#9CAAC6" 
    onmouseout="HideTooltip(evt)" height="140" onmousemove="ShowTooltip(evt, 
    &apos;BlueServiceESB#BlueListener&apos;)"><text fill="black" x="0" id="tooltip" font-
    size="10" y="0" visibility="hidden">BlueServiceESB#BlueListener</text></rect></svg>

我知道它可能看起来令人困惑，如果是这样，我会尝试用其他一些东西替换我的文本元素以使其更具可读性，请在评论中告诉我......

我的script.js文件

// tooltip
function ShowTooltip(evt, mouseovertext)
{
    tooltip.setAttribute("x",evt.clientX+11);
    tooltip.setAttribute("y",evt.clientY+27);
    tooltip.firstChild.data = mouseovertext;
    tooltip.setAttribute("visibility","visible");
}

function HideTooltip(evt)
{
    tooltip.setAttribute("visibility","hidden");
}

// init for tooltip functions
function init(evt)
{
    if ( window.svgDocument == null )
    {
    svgDocument = evt.target.ownerDocument;
    }

    tooltip = svgDocument.getElementById('tooltip');

}

你能告诉我我在这里做错了什么吗？非常感谢！

4

2 回答 2

2

删除init函数，每次只找到工具提示元素。所以你的脚本看起来像：

function ShowTooltip(evt, mouseovertext) {
    var tooltip = document.getElementById('tooltip');
    tooltip.setAttribute("x", evt.clientX + 11);
    tooltip.setAttribute("y", evt.clientY + 27);
    tooltip.firstChild.data = mouseovertext;
    tooltip.setAttribute("visibility", "visible");
}

function HideTooltip(evt) {
    var tooltip = document.getElementById('tooltip');
    tooltip.setAttribute("visibility", "hidden");
}

我认为 SVG 也存在一些问题（可能是因为它的生成方式）。最重要的一点是不要将 包裹text在rect元素中。这有效：

    <svg width="760" height="140" xmlns="http://www.w3.org/2000/svg" version="1.0">

        <rect x="0" width="120" height="140" y="0" style="fill:#DEE7EF" />
        <rect x="120" y="0" width="30" height="140" style="fill:#9CAAC6"
            onmouseout="HideTooltip(evt)" 
            onmousemove="ShowTooltip(evt, &apos;BlueServiceESB#BlueListener&apos;)" />

        <text x="0" y="0" width="20" height="10" fill="black" id="tooltip" font-size="10"  visibility="hidden">BlueServiceESB#BlueListener</text>
    </svg>
于 2013-07-09T11:33:52.577 回答
-1

1）首先你应该使用';' ( style="fill:#9CAAC6;" ) 在 style 属性和每个 js 代码 ( onmouseout="HideTooltip(evt);" )

2) 改变

onmouseout="HideTooltip(evt)"

到

onmouseout="HideTooltip(evt); return false;"

3）我觉得用jquery代替原生js好用

I）为您的形状添加一个ID（在您的情况下为矩形）

二）制作

$('#rect_id').on('mouseover',function(e){
   // do your stuff here
});
$('#rect_id').on('mouseout',function(e){
   // do your stuff here
});

例如，看看http://jqvmap.com/。正如我上面写的那样，工具提示在那里实现。

于 2013-07-09T07:44:54.167 回答