CODEWITHSUNDEEP
objectsvghyperlinkhover
Sam Willis
Sam Willis

Reputation: 4211

Hoverable and Clickable svg

I am trying to create a set of icons in svg that have some hover effects in them. I then have each of these icons wrapped in an <a> but when the page is loaded, the icons are not clickable, but do show their hover effects.

I've tried numerous fixes such as appending an absolutely positioned :before with height and width and transparent background, which creates a clickable area but the icon itself then loses the interactivity. I've also tried using the svg in <img> which again allows it to be clicked but loses the interactivity of it.

This is the code set up I am using:

<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>

The hover effects are in the svg file itself.

Upvotes: 2

Views: 418

Answers (1)

Sam Willis
Sam Willis

Reputation: 4211

This has fixed the issue:

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

The <a> being wrapped around the body of the svg, after the <style> and before the closing </svg>

Upvotes: 1

Related Questions