<p>I don't think this is really anything to do with Craft, but I'll answer anyway.</p>
<p>It's hard to be sure without seeing the full context, but here are two solutions to try:</p>
<p>Add <code>display: block</code> on the anchor tag (or flex or grid or inline-block). Inline elements like anchor tags are not allowed to have dimensions or other box model attributes, and weird things can happen if you do add such attributes. Most browsers generally correct this mistake invisibly for you these days, but you should always make anchors non-inline whenever you want to use box model attributes on them (width/height/padding/margin/borders etc).</p>
<p>Add <code>pointer-events: none</code> to the SVG. This will ensure that the cursor passes through the SVG so that pointer events like hover are handled on the anchor.</p>

CC BY-SA 4.0
2023-08-23T16:23:21.947Z
Thank you for the suggestions. The anchor tag already used display: block. I thought the pointer-events would fix it, so I added the style pointer-events: none to the svg tag. It didn't help. Did I put it in the right place? So frustrating!
cbad
CC BY-SA 4.0
2023-08-23T16:37:09.560Z
Probably best to put together a quick reduced test case demo at codepen or similar.
James Smith
CC BY-SA 4.0
2023-08-22T17:36:10.933Z
2023-08-22T17:36:10.933Z
James Smith
<p>I'm using an svg object for a logo on a site. It is wrapped in an anchor tag. In the browser, the cursor is sometimes a pointer and other times a hand (showing it is a link). It's very erratic and unpredictable for the link to be active.</p>
<p>The anchor tag is static position, and its width and height completely encompass the svg image. Here's the code, I've left in the svg properties in case something in there is causing this behavior.</p>
<blockquote>

</blockquote>
<pre><code>&lt;a href=&quot;https://mysite.com&quot;&gt;
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; 
        xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; 
        version=&quot;1.1&quot; 
        id=&quot;axylknqzci-Layer_1&quot; 
        x=&quot;0px&quot; y=&quot;0px&quot; 
        viewBox=&quot;0 0 549.2 159&quot; 
        style=&quot;enable-background:new 0 0 549.2 159;&quot; 
        xml:space=&quot;preserve&quot;&gt;
        &lt;!-- actual svg code goes here --&gt;
    &lt;/svg&gt;
&lt;/a&gt;
</code></pre>

<p>I'm using the {{ svg() }} function to insert the svg code. I've never seen this weird behavior before, so I'm thinking I'm doing something wrong with the svg.</p>
<p>Any help greatly appreciated!</p>

<svg>
Erratic behavior with anchor tag surrounding svg image
# Erratic behavior with anchor tag surrounding svg image

(Asked by: username_0 on 2023-08-22)

I'm using an svg object for a logo on a site. It is wrapped in an anchor tag. In the browser, the cursor is sometimes a pointer and other times a hand (showing it is a link). It's very erratic and unpredictable for the link to be active.
The anchor tag is static position, and its width and height completely encompass the svg image. Here's the code, I've left in the svg properties in case something in there is causing this behavior.



    
        
    


I'm using the {{ svg() }} function to insert the svg code. I've never seen this weird behavior before, so I'm thinking I'm doing something wrong with the svg.
Any help greatly appreciated!

**Tags:** svg

---

## 1 answers

### Answer by username_1 on 2023-08-22. Score: 1

I don't think this is really anything to do with Craft, but I'll answer anyway.

It's hard to be sure without seeing the full context, but here are two solutions to try:

Add `display: block` on the anchor tag (or flex or grid or inline-block). Inline elements like anchor tags are not allowed to have dimensions or other box model attributes, and weird things can happen if you do add such attributes. Most browsers generally correct this mistake invisibly for you these days, but you should always make anchors non-inline whenever you want to use box model attributes on them (width/height/padding/margin/borders etc).

Add `pointer-events: none` to the SVG. This will ensure that the cursor passes through the SVG so that pointer events like hover are handled on the anchor.

> **Comments:**
> **username_0**: Thank you for the suggestions. The anchor tag already used display: block. I thought the pointer-events would fix it, so I added the style pointer-events: none to the svg tag. It didn't help. Did I put it in the right place? So frustrating!  
> **username_1**: Probably best to put together a quick reduced test case demo at codepen or similar.  

---

