如何在HTML中使用外部SVG? [英] How to use external SVG in HTML?

问题描述

我尝试制作一个引用SVG文件的HTML，该SVG文件是交互式的(CSS悬停):

I try to make an HTML that references to an SVG file, that SVG file is interractive (CSS hover):

1. 如果我使用<img src="algerie.svg">，则会失去交互性.

如果使用开发人员工具在新标签页中打开此图片，它将变为交互式.

If I open this image in a new tab using dev tool, it becomes interactive.

如果我使用:

<svg viewBox="0 0 512 512">
  <use xlink:href="algerie.svg"></use>
</svg>

然后什么也没显示，更糟糕的是，Chrome或Firefox无法在网络开发工具中检测到该文件.

Then nothing is shown, and worse, Chrome or Firefox do not detect the file in the network dev tool.

推荐答案

您应使用<object>标记嵌入图像:

You should embed the image by using <object> tag:

<object data="algerie.svg" type="image/svg+xml"></object>

有关详细信息，请参阅此问题:执行我使用< img>，< object>或< embed> SVG文件?

Refer to this question for the details: Do I use <img>, <object>, or <embed> for SVG files?

这篇关于如何在HTML中使用外部SVG?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！