当包装在<a>标签中时,导入的带有<img>标签的SVG消失了是因为<a>标签默认会将其内容作为链接进行处理,而不是作为嵌入的图像显示。这种情况下,浏览器会尝试解析SVG文件作为链接的目标,而不是将其作为图像显示。
要解决这个问题,可以使用以下两种方法之一:
<style>
a svg {
display: inline-block;
}
</style>
<a href="#">
<svg>
<!-- SVG内容 -->
</svg>
</a>
这样,<a>标签中的SVG将以嵌入图像的方式显示。
<a href="#">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj4KICA8Y2lyY2xlIGN4PSI1IiBjeT0iNSIgcj0iNSIgc3R5bGU9ImZpbGw6cmVkOyIgLz4KPC9zdmc+Cg==" alt="SVG">
</a>
这样,SVG将以图像的形式显示在<a>标签中。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云