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

我想引用一个嵌入在同一个文件夹中另一个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?。引用嵌入html文件中的svg在同一文件夹中的html文档中

我有，我想在这里引用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" > 
 
\t <img class="logo" src="red_fighter.svg" width="240" height="240"/> 
 
</a> 
 

 
</object> 
 

 
</body> 
 

 
</html>

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

来源

2015-01-27 Justin

当你使用一个对象或图像标记引用SVG文件时，它必须真正是嵌入在HTML文件中的SVG文件，而不是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类型的护理（尝试直接查看它来检查它的作品第一次）。

来源

2015-01-27 01:45:05

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

回答

相关问题