Dingo Dingo - 3 months ago 12
HTML Question

SVG Links Broken After Change Of CSS

I have 3 SVG images that all link to another webpage just like an image as seen below:

Unstyled SVG

And as you can see, the images aren't styled well. After I apply some css, they end up looking like this (how I want):

Styled SVG

The problem is after this new styling, the links from each image disappear, except for the middle icon.

This is my css for the icons below (when they are inline):

#facebook {
display:inline;
margin-left:0px;
position: absolute;
}

#instagram {
display:inline;
margin-left:80px;
position: absolute;
}

#mail {
display:inline;
margin-left:36px;
position: absolute;
}


If I change the
position:absolute;
to
position:relative
for all images, the links return.

Not sure why this is happening, anybody?

P.S. my html code is too long to post here as it is using SVG paths, but it simply includes the structure below:

<div>
<svg>
....
</svg>

<svg>
....
</svg>

<svg>
....
</svg>
</div>

Answer

The last one, #mail, is on top of the others because svg elements come with a default height and width that you don't readily see. Try inspecting each svg element in your browser's developer tools and it will be obvious that they overlap each other.

To fix this, just add a height and weight attribute to each svg.

div {
  position: relative;
}

#facebook {
    display:inline;
    margin-left:0px;
    position: absolute;
}

#instagram {
    display:inline;
    margin-left:80px;
    position: absolute;
}

#mail {
    display:inline;
    margin-left:36px;
    position: absolute;
}
<div>
    <svg id="facebook" width="30" height="30">
        <rect width="30" height="30" fill="blue"/>
    </svg>

    <svg id="instagram" width="30" height="30">
        <rect width="30" height="30" fill="red"/>
    </svg>

    <svg id="mail" width="30" height="30">
        <rect width="30" height="30" fill="orange"/>
    </svg>
</div>

See MDN on width and height for SVG elements.