Creación mediante programación de un elemento de imagen SVG con javascript

Al igual que mi título dice, estoy tratando de crear mediante programación un elemento de imagen SVG en una página HTML utilizando javascript. Por alguna razón, mi código de JavaScript básico no funciona, sin embargo, si uso la biblioteca raphaeljs, funciona bien. Entonces, obviamente, hay un problema con mi js, simplemente no puedo entender qué es.Creación mediante programación de un elemento de imagen SVG con javascript

(nota: el navegador de destino es FF4 +)

Aquí está la página básica con una versión HTML de lo que estoy tratando de lograr hasta la parte superior:

<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>

Y aquí es mi 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);

ejemplo vivo: http://jsfiddle.net/Yansky/UVFBj/5/

Fuente

2011-07-15 Yansky

Los atributos nativos SVG (sin incluir xlink:href) no comparten el espacio de nombres SVG; usted puede utilizar simplemente setAttribute en lugar de setAttributeNS, o utilizar

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

por ejemplo.

Aquí está, de trabajo: http://jsfiddle.net/UVFBj/8/

Tenga en cuenta que he cambiado su violín a utilizar correctamente XHTML, SVG de manera que funciona muy bien dentro de ella en todos los principales navegadores.

Fuente

2011-07-15 01:54:44 Phrogz

Ahh, ya veo. Gracias por aclarar eso. :) – Yansky

Dios mío, muchas gracias. ¡Tu eres el Rey! –

Salvaste mi día, eres un caballero y un erudito, creo que señor. –

Para una futura referencia.

He estado usando la función de abajo para crear elementos SVG y estaba fallando en crear imágenes debido a xlink: href.

El abajo código se corrige para hacer eso (crear cualquier elemento SVG sobre la marcha) el uso

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]); 
       } 
      } 
     }

muestra:

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

La matriz se utiliza para organizar 'capas' de grupos SVG etiqueta.

Fuente

2014-04-17 20:03:48

Creo que deberías insertar el nuevo elemento después de crearlo. Para eso tienes el parámetro "principal". – dkellner

Gracias por esto. Lo encontré después de aproximadamente 8 horas de buscar soluciones. – VirtuosiMedia

Creación mediante programación de un elemento de imagen SVG con javascript

Respuesta

Cuestiones relacionadas