2014-07-10 2 views
1

jQuery SVG를 사용하여 id가 "stationMarks"인 g 태그 아래에 이미지를 추가하려고하지만 'var svg = $ ('# stationMarks ') svg ('get ')처럼 보입니다. ; " 작동하지 않는 코드는 다음과 같습니다.jQuery SVG에서 이미지를 추가하지 못했습니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Test</title>  
    <!--<script src="jquery/d3/d3.min.js"> 
    </script>--> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svg.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svganim.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgdom.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgfilter.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgplot.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svggraph.js"></script> 
    <script src="jquery/jquery-1.7.2.js"></script><!-- moved to the top according to advice, but the image still not added--> 
    <script type="text/javascript"> 
     $(function() { 
      var svg = $('#stationMarks').svg('get'); 

      var cx = 21.0526903136934 * 120.343434 - 1470.84140760084; 
      var cy = -21.9878694270822 * 43.343434 + 1859.94190338842; 

      var cx_locate = cx - 10.5; 
      var imageRef = 'swf/siteok.png'; 

      var image = svg.image(cx - 10.5, cy - 25, 21, 25, 'swf/siteok.png', { id: 'img' }); 
     }); 

    </script> 
</head> 
<body> 
<svg width="1584pt" height="2448pt" viewBox="0 0 1584 2448" enable-background="new 0 0 1584 2448" 
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <g> 
... 
     <g id="stationMarks"> 
     </g> 
    </g> 
</svg> 
</body> 
</html> 

누구에게 어떤 문제가 있다고 생각하십니까? 감사합니다.

"svg.image (cx - 10.5, cy - 25, 21, 25, 'swf/siteok.png', {id : 'img'});" 뿐만 아니라 작동하지 않습니다,하지만 난 참조에 따라 오류를 찾을 수 ... 어떤 제안?

+0

마지막으로 'getAttributeNS'와 'setAttributeNS'를 대신 사용하여 jquery.svg로 doms를 조작하지 못했지만 내 작업이 쉬워졌고 지금까지는 작동합니다. 감사합니다 – YY1988

답변

0

Jquery 라이브러리가 head 태그 중 첫 번째로 있어야합니다. jquery 라이브러리를 항상 다른 스크립트 위에 재 배열하십시오.

<script src="jquery/jquery-1.7.2.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svg.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svganim.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgdom.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgfilter.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgplot.js"></script> 
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svggraph.js"></script> 
+0

고마워, 그것은 "var svg = $ ('# stationMarks'). svg ('get');" 작동하고 열쇠 중 하나입니다. 그러나 이미지는 아직 추가되지 않았습니다 ... – YY1988

0

마지막으로 jquery 파일을 추가하고 있습니다. 먼저 jquery 파일을 추가 한 다음 다른 파일을 추가하십시오.

다른 이유는 jquery에 포함되어 있지 않은 jquery 파일에 대한 속성 및 기능이 포함되어 있기 때문입니다.

그래서 순서는 다음과 같이 될 수있다 :이 작동

<script src="jquery/jquery-1.7.2.js"></script> 
<script src="jquery/jquery.svg.package-1.4.5/jquery.svg.js"></script> 
<script src="jquery/jquery.svg.package-1.4.5/jquery.svganim.js"></script> 
<script src="jquery/jquery.svg.package-1.4.5/jquery.svgdom.js"></script> 
<script src="jquery/jquery.svg.package-1.4.5/jquery.svgfilter.js"></script> 
<script src="jquery/jquery.svg.package-1.4.5/jquery.svgplot.js"></script> 
<script src="jquery/jquery.svg.package-1.4.5/jquery.svggraph.js"></script> 

.

관련 문제