Programowe tworzenie elementu obrazu SVG za pomocą javascript

Próbuję programowo utworzyć element obrazu SVG na stronie HTML przy użyciu javascript. Z jakiegoś powodu mój podstawowy kod javascript nie działa, jednak jeśli używam biblioteki raphaeljs, działa dobrze. Więc jest oczywiście problem z moim js - po prostu nie mogę zrozumieć, co to jest.Programowe tworzenie elementu obrazu SVG za pomocą javascript

(uwaga: przeglądarka celem jest FF4 +)

Oto podstawowa strona z wersji html co próbuję osiągnąć aż górny:

<html> 
    <head> 
     <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script> 
    </head> 
    <body> 

     <svg 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     id="test1" 
     height="200px" 
     width="200px"> 
      <image 
      id="testimg1" 
      xlink:href="http://i.imgur.com/LQIsf.jpg" 
      width="100" 
      height="100" 
      x="0" 
      y="0"/> 
     </svg> 

     <hr /> 

     <p id="testP1"> 


     </p> 
     <hr />  
     <p id="testP2"> 


     </p>   
    </body> 
</html>

I tu jest moje javascript:

var paper = Raphael(document.getElementById("testP1"), 200, 200); 
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100); 



var svg = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2'); 

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2'); 
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0'); 

svg.appendChild(svgimg); 

document.querySelector('#testP2').appendChild(svg);

żywo przykład: http://jsfiddle.net/Yansky/UVFBj/5/

Źródło

2011-07-15 Yansky

Natywne atrybuty SVG (z wyjątkiem xlink:href) nie współużytkują przestrzeni nazw SVG; można użyć tylko setAttribute zamiast setAttributeNS lub użyj

svgimg.setAttributeNS(null,'x','0');

na przykład.

Oto ona, pracując: http://jsfiddle.net/UVFBj/8/

pamiętać, że zmieniła swoje skrzypce prawidłowo używać XHTML, SVG, dzięki czemu działa ładnie w niej we wszystkich głównych przeglądarkach.

Źródło

2011-07-15 01:54:44 Phrogz

Ahh, rozumiem. Dzięki za wyczyszczenie tego. :) – Yansky

O mój boże, dziękuję bardzo. Jesteś królem! –

Uratowałeś mi dzień, jesteś Dżentelmenem i Uczonym, pomyśl o tym. –

Dla dalszych referencji.

Używam funkcji poniżej do tworzenia elementów SVG i nie udało się utworzyć obrazów z powodu xlink: href.

Kod poniżej jest korygowana, aby to zrobić (stworzyć dowolny element SVG w locie) Wykorzystanie

function makeSVG(parent, tag, attrs) { 
      var el= document.createElementNS('http://www.w3.org/2000/svg', tag); 
      for (var k in attrs){ 
       if(k=="xlink:href"){ 
        el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]); 
       }else{ 
        el.setAttribute(k, attrs[k]); 
       } 
      } 
     }

próbki:

makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});

Rodzic służy do organizowania 'warstw' na grupach svg etykietka.

Źródło

2014-04-17 20:03:48

Myślę, że powinieneś wstawić nowy element po jego utworzeniu. To jest właśnie parametr "rodzica" dla. – dkellner

Dziękuję za to. Znalazłem to po około 8 godzinach szukania rozwiązań. – VirtuosiMedia

Programowe tworzenie elementu obrazu SVG za pomocą javascript

Odpowiedz

Powiązane problemy