引用嵌入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文檔中

回答

相關問題