2017-02-18 153 views
0

我有一個svg圖像文件,當我從外部頁面調用它時不顯示完整圖像。它只顯示大約一半的圖像。有誰知道爲什麼?SVG圖像文件沒有顯示完整圖像

INDEX.HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title></title> 


<style type="text/css"> 

</style> 

</head> 

<body> 

<svg class="icon"><use xlink:href="image.svg#Layer_1" /></svg> 


<script> 

</script> 

</body> 

</html> 

IMAGE.SVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="433px" height="433px" viewBox="0 0 433 433" enable-background="new 0 0 433 433" xml:space="preserve"> 
<circle fill="#00AEEF" stroke="#000000" stroke-width="7" stroke- miterlimit="10" cx="216.5" cy="216.5" r="213"/> 
</svg> 

回答

1

如果不指定寬度和根svg元素的高度,它會默認爲任意尺寸「 100%「,因此請嘗試在INDEX.HTML中明確地設置尺寸,如下所示:

<svg class="icon" width="433px" height="433px"><use xlink:href="image.svg#Layer_1" /></svg>