Question

这是一个简单的SVG代码，其中嵌入了工具提示：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100"
xml:space="preserve">
<g>
<title>Blue Frame</title>
    <path
    fill="#2E3192"
    d="M75,25v50H25V25H75 M100,0H0v100h100V0L100,0z"
    />
</g>
</svg>

它绘制蓝框并且不做任何其他事情。

问题是只有当鼠标指针在框架上方时才会出现工具提示。当它移动到SVG图像的未填充中心时，工具提示消失。

在<title>标记上移动<g>标记会导致根本没有工具提示。

当鼠标指针悬停在此SVG的任何一点上时，我总是会错过制作工具提示，而不仅仅是填充过的部分？

这只是一个快速和简短的预览来显示问题。例如，很难在只有几条细线的任何大图像上捕捉工具提示。

我知道我可以放置一个矩形，覆盖所有可用的SVG空间并在其上放置任何东西。但是这个矩形也需要一些颜色，而我需要SVG的透明部分保持严格透明。

Answer 1

你总是可以在背景中放置一个隐藏的矩形来捕捉那些你不会错过的鼠标事件：

＆＃13;

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100" xml:space="preserve">
<g>
<title>Blue Frame</title>
    <rect width="100%" height="100%" visibility="hidden" pointer-events="all"/>
    <path
    fill="#2E3192"
    d="M75,25v50H25V25H75 M100,0H0v100h100V0L100,0z"
    />
</g>
</svg>

＆＃13;

Answer 2

我还建议将X和Y位置定义为龙森先生提供的矩形。否则，矩形可能部分或完全出现在图形之外，您必须再次捕获工具提示。

您可能会在X代码的Y参数中获得<svg>和viewBox个值，它们是前两组数字，第一组适用于X，第二个适用于Y。其他两个描述了SVG的初始大小，在这种情况下不需要。

根据您的示例，您不需要定义X或Y，因为它们都等于0：

<rect x="0" y="0" width="100%" height="100%" visibility="hidden" pointer-events="all"/>

但是只要它们是viewBox="-123 456 100 100"，您就会立即注意到SVG的某些部分仍然没有显示任何工具提示。在这种情况下，<rect>标记应如下所示：

<rect x="-123" y="456" width="100%" height="100%" visibility="hidden" pointer-events="all"/>

鼠标悬停在未填充区域时会出现强制SVG工具提示

2 个答案: