JavaScript工具提示用于SVG元素

Question

我有一个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>

我知道这看起来有点令人困惑，如果是这样的话，我会尝试用其他东西替换我的文本元素，让它更易读。请在评论中告诉我...

我的文件

// 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');

}

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

- Smajl

Answer 1

移除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>

- Peter Collingridge

Answer 2

首先，在style属性中应使用';'（style="fill:#9CAAC6;"），并在每个js代码（onmouseout="HideTooltip(evt);"）中使用。

其次，更改

onmouseout="HideTooltip(evt)"

到

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

3) 我认为使用jQuery比使用本地JS更容易

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

II）制作

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

以http://jqvmap.com/为例。那里实现了我上面写的工具提示。

- YCotov

---

谢谢您的回复，您能更详细地解释第三部分吗？我正在Java中生成我的SVG代码，所以如果我不理解它，我不能只是复制它并尝试它（我正在使用Apache Batik）。 - Smajl

1. 下载jQuery
2. 为您的形状设置一个id属性 <rect id='my_rect'></rect>
3. 添加js代码 $('#my_rect').on('mouseover',function(e){ // 在此处显示工具提示 }); $('#my_rect').on('mouseout',function(e){ // 在此处隐藏工具提示 });

- YCotov

我认为jQuery库不是这项工作的正确工具。您建议为简单的“mouseover/mouseout”添加99%不必要的JavaScript。 - andyb

这个示例不仅需要mouseover/mouseout，还需要添加addlistener才能正常工作。jQuery使其更易于阅读和操作。你99%正确，但我认为Smajl是js新手。 - YCotov

第一点不正确。你只需要使用分号来分隔样式：http://www.w3.org/TR/SVG/styling.html#StyleAttribute - Peter Collingridge