SVG 元素上的悬停状态答案

【问题标题】：Hover states on SVG elementsSVG 元素上的悬停状态
【发布时间】：2016-12-23 07:53:45
【问题描述】：

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

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

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

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

【问题讨论】：

空白基本上只是文本。
你的意思是什么？
就文本而言，空格与字母表中的字母没有什么不同，当然是模 xml:space 压缩。
对不起，我只是不明白你在这里想说什么。我有一天结束的模糊大脑自动取款机。
英文字母表由字母 abcde...xyz 组成。 SVG 中的空格或回车符被视为与其中一个字符相同，即与字母 a 相同，但您看不到空格并且可以看到 a

标签： svg hover

【解决方案1】：

如果您想在悬停时更改该 svg 背景，您可以使用具有 sgv 大小的 svg 包装器，并检查它们何时悬停在包装器中，您会更改 svg 背景

【讨论】：

嗯...我更感兴趣的是影响 SVG 图形 inside 上的悬停状态。然而，这是一个很好的建议——我尝试将我的路径分组在一个元素中并将我的链接包裹在它周围，但悬停行为保持不变。我会尝试用透明的矩形包装项目并链接它，但即使这样可行，如果涉及到很多链接，它似乎需要做很多工作。

【解决方案2】：

看来……

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

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

c) 无法改变 SVG 内部链接元素的悬停行为。链接的 SVG 元素可能有某种方法可以通过一些 hack 或解决方法来模仿另一个元素的悬停行为（您的里程可能会因包装器元素而异），但这就是链接在 SVG 中的工作方式，所以最好只是如果您打算链接它们，请注意差异并明智地选择您的元素类型。

【讨论】：