可悬停和可点击的 svg

Question

我正在尝试在 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 文件本身中。

Answer 1

这已解决问题：

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

<a> 包裹着 svg 的主体，在 <style> 之后和结束之前 </svg>

可悬停和可点击的 svg

Hoverable and Clickable svg

svg

object

hyperlink

hover