soverable和Clickable svg

Question

我正在尝试在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>在<style>之后和结束</svg>

之前被getchar(); 缠绕在svg的身体周围