Hoverable和Clickable svg

Question

我试图在svg中创建一组图标，这些图标在svg中有一些悬停效果。然后，我将这些图标包装在一个<a>中，但是当加载页面时，图标不是可点击的，而是显示了它们的悬停效果。

我已经尝试过许多修复方法，比如附加一个绝对定位:在具有高度、宽度和透明背景之前，这会创建一个可点击的区域，但是图标本身就失去了交互性。我还尝试在<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>之前。