2011-03-05 8 views
2

jQuery SVG (http://keith-wood.name/svg.html)를 사용하여 HTML 페이지에 .svg 파일을 표시하려고합니다. 그것은 꽤 간단해야하지만 나는 그것을 작동시킬 수 없습니다.jQuery SVG plugin : 미리 정의 된 SVG 이미지를 표시하는 방법

내가 얻을 수있는 유일한 결과는 큰 상자 (CSS로 스타일 된 내 div)와 단어 "오류로드 :"가 상자에 있습니다. 나는 크롬과 파이어 폭스에서 그것을 시도했다. 크롬에서는 "크롬 브라우저 - 사용 불가 - 웹 보안"으로 실행해야했습니다.

여기에 코드입니다 :주의해야 할

<html> 
<head> 

    <style type="text/css"> 
     #canvas { width: 100%; height: 100%; border: 1px solid #484; } 
    </style> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.svg.min.js"></script> 
    <script type="text/javascript" src="jquery.svgdom.min.js"></script> 
    <script type="text/javascript" src="jquery.svganim.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready (function() { 
      $('#canvas').svg({loadURL: 'lion.svg'}); 
     }); 

    </script> 
</head> 
<body> 
    <div id='console'></div> 
    <div id='canvas'></div> 
</body> 

답변

1

한 가지 URL이 jquery.ajax 호출을 사용하여로드 된 것입니다. 그래서 사자가 지역 일 경우에는 효과가 없을 것이라고 생각합니다.

<html> 
<head> 

    <style type="text/css"> 
     #canvas { width: 100%; height: 100%; border: 1px solid #484; } 
    </style> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script> 
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgdom.js"></script> 
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svganim.js"></script> 
    <script type="text/javascript"> 

     $(document).ready (function() { 
      $('#canvas').svg({loadURL: 'http://keith-wood.name/lion.svg'}); 
     }); 

    </script> 
</head> 
<body> 
    <div id='console'></div> 
    <div id='canvas'></div> 
</body> 
+1

아 - 이제 분명해 보입니다. 감사. 지역 개발을 위해 주위를 둘러 볼 수있는 멋진 방법을 찾았습니다. 파이썬이 설치되어 있다면 파일이있는 디렉토리로 가서 "python -m SimpleHTTPServer"를 실행하십시오. – Pogcotn

1

당신은 독립 SVG 파일을 포함하도록 스크립트를 사용하지 않지만, (당신의 예에서와 같이) 당신은 당신이 원하는 수있는 경우 : 나를 위해 내가 할 작동합니다. 개인적으로 참조로 (예 : <object data="my.svg">) svg를 포함하는 것이 더 깔끔하고 쉽지만 개인이 원하는대로 선택할 수 있습니다.

여기에 some more ways to include svg (SVG Primer)이 있으며, 스크립팅을 사용할 필요가 없습니다.