我想在同一文件夹中的另一个 html 文档中引用嵌入在一个 html 文档中的 svg。我不需要后备方案，但我更喜欢一个。我见过:HTML - pick images of Root Folder from Sub-Folder ，和How to link html pages in same or different folders? ，和Do I use <img>, <object>, or <embed> for SVG files? .
我有一个带有 svg 的 html 文档，我想在此处引用:(该文档名为“pd_unit_red_fighter_v.0.0”，位于同一文件夹中)
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<svg id="red_fighter" width="480" height="480" viewBox="0 0 24 24">
<g stroke-width=".25" stroke="#000" fill="#ccc" >
<circle cx="12" cy="12" r="11.5" fill="#800" />
</g>
</svg>
</body>
</html>我有另一个 html 文档，我希望该文档引用另一个文档中的 svg:
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<object data="red_fighter.svg" type="image/svg+xml">
<img src="./pd_unit_red_fighter_v.0.0.html" />
<a href="#./pd_unit_red_fighter_v.0.0.html" >
<img class="logo" src="red_fighter.svg" width="240" height="240"/>
</a>
</object>
</body>
</html>我已经尝试了对象标签，但无法让它工作。我是否应该使用其他标签或者我使用了错误的信息？我对此很陌生，所以我为我缺乏知识而道歉。
最佳答案
当您使用对象或图像标签引用 SVG 文件时，它实际上必须是 SVG 文件，而不是嵌入 html 文件中的 svg 数据，因此您希望 red_fighter.svg 为
<svg xmlns="http://www.w3.org/2000/svg" id="red_fighter" width="480" height="480" viewBox="0 0 24 24">
<g stroke-width=".25" stroke="#000" fill="#ccc" >
<circle cx="12" cy="12" r="11.5" fill="#800" />
</g>
</svg>
请注意独立 SVG 文件必需的命名空间属性。
然后您可以使用对象或 img 标签引用它。
请注意 svg 文件是否使用正确的 mime 类型(首先尝试直接查看它以检查其是否有效)。
关于html - 在同一文件夹中的 html 文档中引用嵌入 html 的 svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28161635/