SVG 이미지 파일이 전체 이미지를 표시하지 않습니다.

외부 페이지에서 전체 이미지를 표시 할 때 이미지가 표시되지 않는 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>

출처

2017-02-18 Pleinair

당신은 폭 지정하지 않고 루트 SVG 요소의 높이, 그것은 임의의 크기로 기본 설정됩니다 " 100 % '이므로 INDEX.HTML에서 명시 적으로 치수를 다음과 같이 설정하십시오.

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

출처

2017-02-18 17:47:20 jamison

SVG 이미지 파일이 전체 이미지를 표시하지 않습니다.

답변

관련 문제