将指针事件限制为 SVG 文本填充答案

【问题标题】：restricting pointer events to SVG text fill将指针事件限制为 SVG 文本填充
【发布时间】：2015-05-22 22:50:43
【问题描述】：

我需要将 SVG 元素中的指针事件限制为仅填充文本。我不希望当用户在文本周围的矩形中时触发指针事件，但只有当光标实际上在字符本身内部时才会触发。 SVG 指针事件“填充”应该可以工作，但由于某种原因它不是。谁能告诉我为什么不这样做，或者什么可以代替？

在下面的示例中（此处为 jsfiddle：http://jsfiddle.net/rgfdudst/），指针事件在光标位于单词之间时被激活。我希望指针事件仅在鼠标直接位于字符填充顶部时触发：

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="100px">
  <text x="10"  y="40">
    SVG text styling
  </text>
</svg>

CSS 文本 { 指针事件：填充；填充：红色；字体大小：50px；字体系列：宋体； }

text:hover {
  cursor: pointer;
  fill: blue; 
}

【问题讨论】：

我认为这不可能。单个文本字形不是可以悬停的元素。除非你把每个字符分成一个单独的元素。
我认为，如果您下载 Firefox 1.5（是的，确实是 2005 年的 1.5），这就是您所得到的。尝试单击一个 o 并且大部分都未命中真的很有趣，但这并不是一个很好的用户体验，最后我们遵循 SVG 规范并使用字形单元边界进行选择。
好的有道理。谢谢你们！

【解决方案1】：

我认为你必须使用path's 来定义你的文本。并将您的悬停样式附加到那些path's

text 区域是一个矩形，因此当您进入该矩形时，您的事件将触发。

【讨论】：