javascript - 将指针事件限制为 SVG 文本填充

Question

我需要将 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; 
}

Answer 1

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

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