Publicado em 19 de dez.

Função Javascript não reconhece Class de Polyline SGV criada dinamicamente com Javascript

Srs sou principiante na Linguagem Javascript e estou tendo dificuldades em implementar um projeto, peço ajuda .

Neste projeto crio dinamicamente com Javascript polylines dentro de um SVG, cada polyline e criada com duas Classes (draggable e tooltip), a Class draggable é reconhecida normalmente, mas a tooltip não é reconhecida, quando a tag polyline com as classes é adicionada normalmente dentro do index funciona corretamente.

abaixo códigos do projeto:

Função ocultar polyline:

let valor;

let checagem;

function teste(checkbox) {

 valor = checkbox.value;
 checagem = checkbox.checked;
}

function ocultar(){

 let polyline = document.getElementsByTagName("polyline");
 let equipe = document.getElementsByName("equipe");

 if(checagem === true){

 for(j=0;j<polyline.length;j++){
 if(polyline[j].getAttribute("name")=== valor){
 polyline[j].setAttributeNS(null, "visibility", "hidden");
 }
 }

 }

 if(checagem ===false){

 for(j=0;j<polyline.length;j++){
 if(polyline[j].getAttribute("name")===valor){
 polyline[j].setAttributeNS(null, "visibility", "visible");
 }
 }

 }

}

<!DOCTYPE html>

<html lang="pt-br">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <link rel="stylesheet" href="_css/estilo_principal.css">
 <script src="js/arrastar.js"></script>
 <script src="js/tooltip.js"></script>
 <script src="js/ocultar.js"></script>

 <title>Painel Diagrama</title>
 </head>
 <body>

 <div id="painel">

 <input type="button" value="Desenhar" onclick="criarlinha()"/>

 <div id="itens" class="w3-container">
 <div class="w3-dropdown-hover">
 <input type="button" id="equipe-1" value="Equipes" title="Selecione uma Equipe para oculta-lá"/>
 <div class="w3-dropdown-content w3-bar-block w3-border">
 <ul id="equipes">

 </ul>
 </div>
 </div>
 </div>
 </div>

 <div id="diagrama" >
 <svg id="tela" width="14800px" height="2640px" viewBox="0 0 14800 2640" onload="makeDraggable(evt); tooltip(evt)">

 <g id="tooltip" visibility="hidden" >
 <rect x="2" y="2" width="80" height="85" fill="black" opacity="0.4" rx="2" ry="2"/>
 <rect width="80" height="85" fill="grey" rx="2" ry="2"/>
 <text x="4" y="6">Tooltip</text>
 <line x1="2" y1="23" x2="170" y2="23" stroke="black" stroke-width="2"></line>
 <text x="4" y="26">Tooltip</text>
 <line x1="2" y1="43" x2="170" y2="43" stroke="black" stroke-width="2"></line>
 <text x="4" y="46">Tooltip</text>
 <line x1="2" y1="63" x2="170" y2="63" stroke="black" stroke-width="2"></line>
 <text x="4" y="66">Tooltip</text>
 </g>
 <polyline class="draggable tooltip" name="teste" points="885 980 1200 980" stroke="green" stroke-width="10" fill="none" equipe="Equipe: Teste" os="os: 27493/2019" trecho="Trecho: Teste1" fiscal="Fiscal: Fulano de Tal"/>

 </svg>

 </div>

 <script src="js/linhasvg.js"></script>

 </body>

</html>

	Função tooltip:

function tooltip(evt) {
 var svg = document.getElementById('tela');
 var tooltip = svg.getElementById('tooltip');
 var tooltipText = tooltip.getElementsByTagName('text')[1];
 var tooltipText1 = tooltip.getElementsByTagName('text')[0];
 var tooltipText2 = tooltip.getElementsByTagName('text')[2];
 var tooltipText3 = tooltip.getElementsByTagName('text')[3];
 var tooltipRects = tooltip.getElementsByTagName('rect');
 var triggers = svg.getElementsByClassName('tooltip');
 var line = svg.getElementsByTagName('line');

 for (var i = 0; i < triggers.length; i++) {
 triggers[i].addEventListener('mousemove', showTooltip);
 triggers[i].addEventListener('mouseout', hideTooltip);
 }

 function showTooltip(evt) {
 var CTM = svg.getScreenCTM();
 var x = (evt.clientX - CTM.e + 6) / CTM.a;
 var y = (evt.clientY - CTM.f + 20) / CTM.d;
 tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")");
 tooltip.setAttributeNS(null, "visibility", "visible");

 tooltipText.firstChild.data = evt.target.getAttributeNS(null, "equipe");
 tooltipText1.firstChild.data = evt.target.getAttributeNS(null, "os");
 tooltipText2.firstChild.data = evt.target.getAttributeNS(null, "trecho");
 tooltipText3.firstChild.data = evt.target.getAttributeNS(null, "fiscal");
 var length = tooltipText.getComputedTextLength();
 for (var i = 0; i < tooltipRects.length; i++) {
 tooltipRects[i].setAttributeNS(null, "width", length + 15);
 line[i].setAttributeNS(null,"x2",length + 15)
 }
 }

	Função linhasvg:

let svg = document.querySelector("svg");

let status = true;

function criarlinha(){

 let linha = document.createElementNS("http://www.w3.org/2000/svg","polyline");

 let pontos = [];

 let equipes = document.getElementsByTagName("li")
 let equipe = prompt("Informe o nome do Setor.")

 let checar = document.getElementsByClassName("equipe")

 for (let i = 0; i < 4; i ++ ){
 pontos.push(Number(prompt("Informe os valor")));
 }
 linha.setAttribute("class","draggable tooltip");
 linha.setAttribute("name",equipe);
 linha.setAttribute( "points", pontos);
 linha.setAttribute("fill", "none");
 linha.setAttribute("stroke","green");
 linha.setAttribute("stroke-width", 6);
 linha.setAttribute("equipe",equipe)
 linha.setAttribute("os","2997/2019")
 linha.setAttribute("trecho","POA/CVN")
 linha.setAttribute("fiscal","Fiscal: Fulano de Tal")

 svg.appendChild(linha);
 pontos = [];

 let quantidade_li = equipes.length

 if (quantidade_li > 0) {

 for (let i = 0; i < checar.length; i++) {

 if ( checar[i].value === equipe){
 status = false;

 }

 }

 }

 if(status !== false){

 let lis;

 let ul = document.getElementById("equipes");

 let l1 = document.getElementsByTagName("li");

 let li = document.createElement("li");

 let span = document.createElement("span");

 var input = document.createElement("input");

 input.type ="checkbox";

 input.value = equipe;

 input.className="equipe";

 input.name="equipe";

 input.setAttribute("onclick","teste(this), ocultar()")

 span.innerText= equipe;

 ul.appendChild(li);

 if (l1.length > 0) {

 lis = l1.length - 1;
 }

 else{
 lis = l1.length;
 }
 l1[lis].appendChild(span);

 l1[lis].before(input, span);

 }
 let item = document.getElementsByClassName("equipe")
 let poly = document.getElementsByTagName("polyline")

 for (let i = 0; i < item.length;i++){
 for(j = 0; j < poly.length; j++){
 if (item[i].attributes[1].value === poly[j].attributes[1].value){
 if(item[i].checked === true){
 poly[j].setAttribute( "visibility", "hidden")

 }

 }
 }

 }
 }

	Função arrastar:

function makeDraggable(evt) {
 let svg = evt.target;

 svg.addEventListener('mousedown', startDrag);
 svg.addEventListener('mousemove', drag);
 svg.addEventListener('mouseup', endDrag);
 svg.addEventListener('mouseleave', endDrag);
 svg.addEventListener('touchstart', startDrag);
 svg.addEventListener('touchmove', drag);
 svg.addEventListener('touchend', endDrag);
 svg.addEventListener('touchleave', endDrag);
 svg.addEventListener('touchcancel', endDrag);
 svg.addEventListener('click', clicar);

 function getMousePosition(evt) {
 let CTM = svg.getScreenCTM();
 if (evt.touches) { evt = evt.touches[0]; }
 return {
 x: (evt.clientX - CTM.e) / CTM.a,
 y: (evt.clientY - CTM.f) / CTM.d

 };

 }

 let selectedElement, offset, transform;

 function startDrag(evt) {
 if (evt.target.classList.contains('draggable')) {
 selectedElement = evt.target;
 offset = getMousePosition(evt);

 // Make sure the first transform on the element is a translate transform
 let transforms = selectedElement.transform.baseVal;

 if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
 // Create an transform that translates by (0, 0)
 let translate = svg.createSVGTransform();
 translate.setTranslate(0, 0);
 selectedElement.transform.baseVal.insertItemBefore(translate, 0);
 }

 // Get initial translation
 transform = transforms.getItem(0);
 offset.x -= transform.matrix.e;
 offset.y -= transform.matrix.f;
 }
 }

 function drag(evt) {
 if (selectedElement) {
 evt.preventDefault();
 let coord = getMousePosition(evt);
 transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
 }

 }

 function clicar(evt) {
 if (selectedElement) {
 evt.preventDefault();
 let coord = getMousePosition(evt);
 transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
 }
 alert("X= " + getMousePosition(evt).x + " Y= " + getMousePosition(evt).y)
 }
 function endDrag(evt) {
 selectedElement = false;
 }

}

	Estilo estilo_principal:

@charset "utf-8";

svg#tela{

 background: url("_imagens/diagrama.png") no-repeat;

}

div#diagrama{

 position: absolute;
 border: 2px solid black;
 top: 180px;
 left: 30px;
 width: 95%;
 height: 80%;
 overflow: auto;
}

div#painel{

 position: absolute;
 border: 1px solid black;
 padding: 10px;
 left: 30px;

}

div#painel input{

 text-align: center;

}

input#equipe-1{

 width: 150px;
 margin-left: -10px;
}

div#itens{

 float: right;
 width: 165px;
}

.equipe{
 margin-left: 5px;
}

span{

 margin-left: 5px;
}

ul#equipes{

 padding-left: 0px;
 padding-top: -15x;
}

ul#equipes li{

 list-style: none;
 padding: 1px;

}

svg text{

 fill: white;
}

#tooltip {
 dominant-baseline: hanging;
}

.draggable{
 cursor: move;
}

	Desde já agradeço a atenção e colaboração.

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...