Question

我有3个SVG图像，所有这些图像都链接到另一个网页，就像下图所示：

正如您所看到的，图像没有很好的样式。在我申请一些CSS后，他们最终看起来像这样（我想要的）：

问题出在这个新造型之后，每个图像的链接都消失了，除了中间的图标。

这是我对下面图标的css（当它们是内联时）：

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

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

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

如果我将所有图片的position:absolute;更改为position:relative，则链接会返回。

不确定为什么会这样，任何人？

P.S。我的html代码太长了，不能在这里发布，因为它使用的是SVG路径，但它只包含以下结构：

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

    <svg>
        ....
    </svg>

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

Answer 1

最后一个#mail位于其他位置之上，因为svg元素具有您不容易看到的默认高度和宽度。尝试检查浏览器的开发人员工具中的每个svg元素，很明显它们会相互重叠。

要解决此问题，只需为每个height添加weight和svg属性。

＆＃13;

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

＆＃13;

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

＆＃13;

请参阅width上的MDN和SVG元素的height。

更改CSS后SVG链接断开

1 个答案: