Jump to content

Elemento SVG criado por Javascript


Miguelmmm
 Share

Recommended Posts

Boas!

O problema é o seguinte: eu quero criar um elemento SVG com um segmento de reta e um triângulo na ponta (uma seta, basicamente...). O problema é que, quando tento fazer isso com javascript, o marker (a ponta da seta, o tal triângulo) não aparece.

Alguém me consegue explicar o que estou a fazer mal no código? O estranho é que, quando meto diretamente o código no html, funciona. Mas quando o html é gerado a partir do javascript, a ponta da seta não aparece...

O código está neste fiddle: http://jsfiddle.net/7HTmv/2/

function runBtnCode(){

//Adiciona a respetiva seta
var element2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
element2.setAttribute('id', "rep-svg-" + ( 13 ) );

element2.setAttribute('class', 'rep-svg');
//element2.className = 'rep-svg';
//element2.style = 'position: absolute; left: ' + parseInt( document.getElementById("map-axis").style.left , 10) + 'px; top: ' + parseInt( document.getElementById("map-axis").style.top , 10) + 'px;';
element2.setAttribute( "style", ( 'position: absolute; left: ' + 20 + 'px; top: ' + 20 + 'px;' ) );
element2.setAttribute( "width", "300" );
element2.setAttribute( "height", "300" );
document.getElementById('container').appendChild(element2);
//element2.innerHTML = '<defs><marker id="myMarker-' + (window.conceptMapReplica.length + 1) + '" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="4" markerHeight="3">';
//element2.innerHTML += '<polygon points="0,0 10,5 0,10" style="fill:rgb(100, 100, 100);" />';
//element2.innerHTML += '</marker></defs>';

/////////////////
var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
var marker2 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
   marker2.setAttribute('id', 'myMarker-' + (13) );
   marker2.setAttribute('viewBox', '0 0 10 10');
   marker2.setAttribute('refX', '1');
   marker2.setAttribute('refY', '5');
   marker2.setAttribute('markerUnits', 'strokeWidth');
   marker2.setAttribute('markerWidth', '4');
   marker2.setAttribute('markerHeight', '3');
   marker2.setAttribute('orient', 'auto');
   //var path2 = document.createElementNS('http;//www.w3.org/2000/svg', 'path');
var path2 = document.createElementNS('http;//www.w3.org/2000/svg', 'polygon');
path2.setAttribute('points', '0,0 10,5 0,10');
path2.setAttribute('style', 'fill:rgb(100, 100, 100);');

   marker2.appendChild(path2);
   //path2.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
element2.appendChild(defs);
   defs.appendChild(marker2);

/////////////////


/////////
//element2.innerHTML += '<line id="rep-arrow-' + (window.conceptMapReplica.length + 1) + '" x1="5" y1="5" x2="100" y2="100" stroke="rgb(100, 100, 100)" stroke-width="5" marker-end="url(#myMarker-' + (window.conceptMapReplica.length + 1) + ')" stroke-linecap="round" />';

var obj2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
   obj2.setAttribute('id', 'rep-arrow-' + (13) );
obj2.setAttribute('x1', 50);
   obj2.setAttribute('y1', 50);
   obj2.setAttribute('x2', 50);
   obj2.setAttribute('y2', 150);
   obj2.setAttribute('stroke', '#ff0000');
   obj2.setAttribute('stroke-width', 7);
   obj2.setAttribute('marker-end', 'url(#myMarker-' + (13) + ')' );

   element2.appendChild(obj2);

/////////

element2.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
}

runBtnCode();

Desde já agradeço a ajuda 🙂

Link to comment
Share on other sites

Não percebo grande coisa de SVG, mas peguei no teu código e tentei simplificar o máximo que consegui, de modo a conseguir percebê-lo. Acabei a fazer isto:

function runBtnCode(){
   var element2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   element2.setAttribute('id', "rep-svg-" + ( 13 ) );

   element2.setAttribute('class', 'rep-svg');
   element2.setAttribute( "style", ( 'position: absolute; left: ' + 20 + 'px; top: ' + 20 + 'px;' ) );
   element2.setAttribute( "width", "300" );
   element2.setAttribute( "height", "300" );
   document.getElementById('container').appendChild(element2);

   var obj2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
   obj2.setAttribute('id', 'rep-arrow-' + (13) );
   obj2.setAttribute('x1', 50);
   obj2.setAttribute('y1', 50);
   obj2.setAttribute('x2', 50);
   obj2.setAttribute('y2', 150);
   obj2.setAttribute('stroke', '#ff0000');
   obj2.setAttribute('stroke-width', 7);
   obj2.setAttribute('marker-end', 'url(#myMarker-' + (13) + ')' );
   element2.appendChild(obj2);

   var obj3 = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
   obj3.setAttribute('points', '50,20 30,50 70,50');
   obj3.setAttribute('style', 'fill:rgb(100, 100, 100);');
   element2.appendChild(obj3);

   element2.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
}

Aparentemente está a funcionar, mas não sei se alguma coisa do que removi também era necessário.

Link to comment
Share on other sites

Peço desculpa pela demora na resposta, mas, ainda que o código esteja a funcionar, não está a funcionar como é suposto na situação final.

O objetivo disto é poder fazer uma reta com uma seta na ponta, mas não uma reta estática! A reta muda de direção, logo, a seta tem que estar "agarrada" à ponta da reta. Na tua solução, o "triângulo" (seta) está estático. O que eu preciso é que, por exemplo:

Ao mudar a linha "obj2.setAttribute('y1', 50);" para "obj2.setAttribute('y1', 100);", o triângulo vá "agarrado" à reta, o que não está a acontecer.

De qualquer forma, obrigado pela resposta. Mais alguma sugestão para resolver o problema?

Link to comment
Share on other sites

Poder posso, mas visto que o desempenho na situação em questão tem que ser considerado, era muito mais simples se conseguisse utilizar svg markers, que fazem essas translações/rotações automaticamente

(no final, é suposto que estejam no ecrã um número indeterminado de setas, e podem ter que ser "transladadas" várias em simultâneo, a par com várias outras operações, daí a importância do desempenho).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.