悬停在SVG元素上的状态

Question

链接的SVG元素似乎不像链接的HTML元素。如果链接圆圈或路径（包括呈现为路径的文本），则必须将鼠标直接放在内容上方才能激活悬停状态。将鼠标放在形状之间的空白处不会触发悬停状态。

悬停在不同SVG元素类型上的示例CodePen： http://codepen.io/bmarshall/pen/VjgJpb

有趣的是，悬停在真正的<text>元素上的行为更像HTML，即使在空白区域，悬停状态也会激活！

这只是SVG中的“它的方式”吗？为什么文本的处理方式与其他形状不同？如果需要，可以改变这种行为吗？怎么样？

Answer 1

如果你想在悬停时更改svg背景，你可以使用svv大小的svg包装器，并检查它们何时悬停在包装器中你更改了svg背景

Answer 2

所以看来......

a）是的，这只是链接SVG元素的行为方式。 SVG不是HTML，链接在两者中的工作方式略有不同。野兽的本性。

b）保存在真实SVG <text>元素中的文本在链接时的行为与保存为路径的文本的行为不同，因为真实文本和路径是根本不同的概念/技术。链接路径，无论是<circle>，<rect>还是保存在path元素中的文本都具有类似的悬停行为，因为它们基本上都是路径下的所有路径对象（或者至少可以被认为因此）。然而，文本是由文本引擎使用字体，基线，字形等真正布局的，并且通过与常规普通旧路径不同的方式呈现。我不会因为试图比这更深刻地解释而使自己难堪，但基本上，它们在链接时表现不同，因为它们在概念上是截然不同的，并且每个都以自己的方式呈现。

c）关于改变SVG内部链接元素的悬停行为，没有太多办法。有可能链接的SVG元素通过一些黑客或解决方法来模仿另一个的悬停行为（你的里程可能因包装元素而异）但这有点像链接在SVG中如何工作所以最好只是意识到差异并明智地选择你的元素类型，如果你打算链接它们。