2017-02-18 7 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>