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

関連する問題