可悬停和可点击的svg答案

【问题标题】：Hoverable and Clickable svg可悬停和可点击的svg
【发布时间】：2015-12-26 15:17:33
【问题描述】：

我正在尝试在 svg 中创建一组图标，其中包含一些悬停效果。然后我将这些图标中的每一个都包裹在<a> 中，但是当页面加载时，这些图标不可点击，但会显示它们的悬停效果。

我尝试了许多修复，例如附加一个绝对定位的 :before 高度和宽度以及透明背景，这会创建一个可点击区域，但图标本身会失去交互性。我还尝试使用<img> 中的 svg，它再次允许点击它但失去了它的交互性。

这是我正在使用的代码设置：

<a href="/batteries" class="svg-link">
    <object type="image/svg+xml" class="svg-icon" data="{{ asset('img/icons/servicing/batteries-car-active.svg') }}">
    </object>
</a>

悬停效果在 svg 文件本身中。

【问题讨论】：

嘿，我想这里已经回答了：stackoverflow.com/questions/11374059/…
最简单的方法是让 SVG 处理点击。目前，您希望容器处理一些交互，而内容处理一些，这并不容易实现。
Persijn 我之前看过一个答案，不幸的是，使用“”意味着我失去了 svg 中的悬停效果。 @RobertLongson 我将如何更好地构建它？
将链接移到 SVG 中。 IE。使用 SVG <a> 元素而不是 html <a> 元素。

标签： object svg hyperlink hover

【解决方案1】：

这已经解决了这个问题：

<a xlink:href="/servicing/{{ $masterTemplateType }}/batteries">
</a>

<a> 包裹在 svg 的主体上，在 <style> 之后和关闭 </svg> 之前

【讨论】：