인공 지능에 의해 생성 된 SVG가 뒤에 표시되지 않습니다.

Adobe Illustrator를 사용하여 생성 한 .svg 파일이 있습니다. 인공 지능에 의해 생성 된 SVG가 뒤에 표시되지 않습니다.

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<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="1068px" height="1671.49px" viewBox="0 0 1068 1671.49" enable-background="new 0 0 1068 1671.49" xml:space="preserve"> 
<g> 
    <polygon fill="#C6C6C6" points="451.07,1979.34 451.07,1979.34 450.8,1979.17 448.72,1978.82 448.6,1978.71 448.34,1978.59 
     447.71,1978.36 448.01,1978.33 450.2,1978.3 452.53,1978.76 451.35,1979.08 451.73,1979.29  "/> 
<!-- more polygon shapes --> 
</g> 
</svg>

가 그럼 난 내 .html 파일이 같은 <embed> 태그를 사용하여 포함 : 다음은 SVG 파일의 구조입니다. HTML 파일의 구조 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My Demo</title> 
     <link rel="stylesheet" href="css/style.css" /> 

     <script src="js/jquery-1.8.2.min.js"></script> 
     <script src="js/raphael-min.js"></script> 
     <script src="js/script.js"></script> 

    </head> 
    <body> 
     <div id="shape1"></div> 
     <div id="shape2"></div>   
     <div id="shape3"></div> 
     <div id="embed_svg"> 
      <embed src="my_svg_file.svg" type="image/svg+xml" /> 
     </div> 
    </body>  
</html>

주 :

나는 내가 raphael.js HTML5 라이브러리를 사용하여 3 개 HTML5 모양을 그려했습니다 그들은 완벽하게 작동하기 때문에 그와 관련된 브라우저 지원 생각하지 않습니다 . (크롬과 파이어 폭스에서 시도)
파일을 포함시키는 것이 제대로 작동하지 않습니다. 브라우저에서 구문 분석하는 것처럼 보이지만 표시하지 않는 것 같습니다.

출처

2012-10-02 alex.dominte

테스트 할 브라우저는 무엇입니까? – Giona

@GionaF 크롬 및 파이어 폭 –

도형의 좌표가 매우 유사하여 폴리곤이 viewBox 영역의 매우 작은 부분을 차지합니다.

<svg> 요소의 viewBox를 viewBox = "448 1977 5 10"으로 변경하면 표시 영역이 이제는 다각형 좌표와보다 가깝게 일치하거나 다각형을 더 크게 만드는 것처럼 모양이 표시됩니다.

출처

2012-10-02 10:21:44

이제 .. 오른쪽 상단 모서리를 표시하는 것 같습니다. 그러나이 문제에 대해 어떻게 생각했는지 알 수 없습니다. 모든 SVG를 표시하려면 어떻게해야합니까? width = "1068px"height = "1671.49px".. 왜 viewBox = "0 0 1068 1671"은 아무것도 표시하지 않습니다. 오른쪽 상단에서 시작하여 필요한 모든 것을 표시하기 때문에 –

viewBox 큰 영역을 덮고 그 영역 내의 다각형 크기가 1 픽셀보다 작습니다. viewBox가 폴리곤보다 큰 영역을 덮도록 만들면 모양이 보입니다. –

감사합니다 .. 그렇다면 AdobeIllustrator의 내보내기 프로세스가 잘못된 것처럼 보입니다.이 프로세스의 모든 ideeas .. 웹용으로 저장을 선택하고 'Artboard 용 클립'옵션의 선택을 취소하면 생성 된 이미지가 잘 작동합니다. 나는 그런 옵션을 svg로 저장할 때 –

인공 지능에 의해 생성 된 SVG가 뒤에 표시되지 않습니다.

답변

관련 문제