在同一文件夹的 html 文档中引用嵌入在 html 中的 svg

Question

我想在同一文件夹中的另一个 html 文档中引用一个 html 文档中嵌入的 svg。我不需要后备，但我更喜欢一个。我看过：HTML - pick images of Root Folder from Sub-Folder, and How to link html pages in same or different folders?, and Do I use <img>, <object>, or <embed> for SVG files?.

我有一份 html 文档，其中包含我想在此处引用的 svg：（该文档名为 "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>

我已经尝试了两个对象标签，但我无法让它工作。我应该使用另一个标签还是我使用了错误的信息？我对此很陌生，所以我为我缺乏知识而道歉。

Answer 1

当您使用对象或图像标签引用 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 标签来引用它。

注意使用正确的 mime 类型提供 svg 文件（首先尝试直接查看它以检查它是否有效）。

在同一文件夹的 html 文档中引用嵌入在 html 中的 svg

Reference an svg embedded in html in html document in same folder

html

svg

reference