Question

我想在同一个文件夹中的另一个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文档，我想在这里引用:(此文档名为＆＃34; pd_unit_red_fighter_v.0.0＆＃34;并且位于同一文件夹中）

＆＃13;

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

＆＃13;

我有另一个html文档，我希望这个文档在另一个文档中引用svg：

＆＃13;

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

＆＃13;

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

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文件是必需的。

然后你可以使用object或img标签来引用它。

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

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

1 个答案: