이미지가 외부에 있고 svg : g에로드 될 때 svg : image의 요소에 액세스하는 방법

svg의 그룹에 circle.svg을로드하고 서클의 요소 (빼기 또는 svgbar)에 액세스하려고합니다. circle.svg 내의 모든 것은 null 또는 undefined로 나타납니다.이미지가 외부에 있고 svg : g에로드 될 때 svg : image의 요소에 액세스하는 방법

개체로로드하려고했지만 이미지를로드하지 않습니다. contentDocument를 통해 검색을 시도했지만 contentDocument는 정의되지 않았습니다.

도움이 될 것입니다.

circle.svg의 내용 :

<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="minus" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" > 
<circle id="svgbar" cx="16" cy="16" r="16" /> 
<rect id="iline" x="8" y="14" fill="#F9F9F9" width="16" height="4" /> 
</svg>

HTML :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>How to access externally loaded svg elements</title> 

     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    </head> 

    <body> 

     <script type="text/javascript"> 

      var vis = d3.select("body").append("svg").attr("id", "svgObj"); 
      var grp = vis.append("g").attr("id", "grp"); 

      /*var img = grp.append("object") 
        .attr("type", "image/svg+xml") 
        .attr("data", "imgs/nav/circle.svg");*/ 

      var img = grp.append("image") 
        .attr("id", "collapse") 
        .attr("xlink:href", "imgs/nav/circle.svg"); 

        img.attr("height", 20) 
        .attr("width", 20) 
        .on("mouseover", function() { 

         console.log("overing..."); 
        }); 


      var befSvgObj = document.getElementById('svgObj'); 
      console.log("befSvgObj: " + befSvgObj); 

      // wait until all the resources are loaded 
      window.addEventListener("load", findSVGElements, false);   

      function findSVGElements() { 

       var contDoc = befSvgObj.contentDocument; 

       var svgObj = document.getElementById('svgObj'); 
       var gObj = document.getElementById('grp'); 
       var cObj = document.getElementById('collapse'); 
          var svgBar = document.getElementById('svgBar'); 
       var minus = document.getElementById('minus'); // null 
       //var minus2 = cObj.contentDocument.getElementById('minus'); 
       // Cannot call method 'getElementById' of undefined 

       console.log("svgObj: " + svgObj); 
       console.log("gObj: " + gObj); 
       console.log("cObj: " + cObj); 
       console.log("minus: " + minus); 

       console.log("svgObj.contentDocument: " + svgObj.contentDocument); 
       console.log("gObj.contentDocument: " + gObj.contentDocument); 
       console.log("cObj.contentDocument: " + cObj.contentDocument); 
       console.log("contDoc: " + contDoc); 
          console.log("svgBar: " + svgBar); 

      } 


     </script> 

    </body> 
</html>

의

출처

2014-02-04 Mindgnosis

당신은 이미지와 같은 외부 SVG를 포함하는 경우, 즉 당신이 얻을 전부 - 이미지, 당신 PNG 또는 JPEG 이미지보다 더 이상 수정할 수 없습니다. Read the W3 specs for more.

외부 SVG의 내용에 액세스하거나 수정해야하는 경우 this answer describes how to read the external file as XML and insert it in your current document.

출처

2014-02-04 01:11:10 AmeliaBR

감사합니다. 지금 요소 디버그에서 볼 수 있지만 여전히 document.getElementById 또는 contentDocument.getElementById를 사용하여 svg 요소에 액세스 할 수 없습니다. – Mindgnosis

여전히 창로드 이벤트에서 'findSVGElements' 메서드를 호출하고 있습니까? *'d3.xml'이 비동기 콜백 메소드를 트리거 한 후 *까지 기다려야하기 때문입니다. 그것은 왜'document.getElementById()'가 실패 할까를 생각할 수있는 유일한 이유입니다. (글쎄, 삽입 된 내용과 나머지 문서 사이의'id '값 사이의 충돌이나, 여러분의 예제에서는 고유 한 값을 가진 것처럼 보입니다.)'contentDocument'는 이것이 포함 된 객체가 아니기 때문에 실패합니다. 내용 문서가 없습니다. [이 MDN 문서] (https://developer.mozilla.org/en-US/docs/Web/SVG/Scripting) – AmeliaBR

고마워요! 그것은 그것의 일부였습니다. svg 요소를 지금 "빼기"로 검색 할 수 있지만 내용은 "svgbar"가 아닙니다. [jsbin] (http://jsbin.com/IneBoGOt/1/edit?html,js,console) – Mindgnosis

이미지가 외부에 있고 svg : g에로드 될 때 svg : image의 요소에 액세스하는 방법

답변

관련 문제