SVG中Z形路径的交互区域

时间:2011-10-28 09:39:13

标签: javascript svg

我们有通过Ajax加载SVG并通过Javscript进行交互的代码。 SVG代表接线图 - 即路径('导线')和文本('导线标签')。路径和文本对象在一个节点下分组 - 每个节点还包含一个节点:使用我们放置在desc节点中的ID,我们可以响应点击 - 例如通过弹出“选定的电线”的详细信息。

一般情况下,系统运行良好 - 但偶尔我们回来的SVG点击事件似乎属于“另一线”。以下是发生这种情况时geomtry的示例:

             ---------------
             -
             -
     ....... -.....Wire1....
             -
             -
             -
 ------Wire2--

(我希望这很清楚 - Wire1是水平的,Wire 2是锯齿形,在穿过Wire1时垂直运行)

在这个几何中,我们看到的行为是:

  • 点击Wire1路径 - > Wire1 Path的事件点

    点击Wire1 Text - > Wire2路径上的事件点(!错误

    点击Wire2路径 - > Wire2 Path的事件点

    点击Wire2 Text - > Wire2文本中的事件点

更改z顺序(在SVG文件中写入Wire1之后的Wire2)无效。

通过一系列短路径(而不是一条长路径)来表示电线,解决了这个问题,但增加了文件大小(这些接线图非常庞大)。

有人想知道这只是一个SVG浏览器中的一个错误 - 但它可以在Safari 5和Mozilla中观察到。 (我假设不共享共同的代码库)。这表明在某些情况下,SVG将Z形路径的“活动可点击区域”定义为其边界矩形。

我们如何控制这个?是否有标题标记属性或其他工作循环会限制路径本身的任何路径的活动区域?

1 个答案:

答案 0 :(得分:0)

如果您的路径上有填充物(即使是与背景颜色相同的颜色),也可以清楚地解释这一点。您是否有可以分享的测试用例来显示问题?