Svg ne permet pas de redessiner des objets

J'essaie de développer un odontogramme, pour cela je dois redessiner la dent complète avec le clic de l'événement, mais le problème est que après que je nettoie mon tag svg, je ne peux pas redessiner tous les objets dont j'ai besoin avec les mêmes coordonnées définies au début, j'ai essayé de résoudre, mais je n'ai pas été capable de le faire. Il redessine juste le premier élément, mais pas les autres.Svg ne permet pas de redessiner des objets

Mon code source:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Odontograma</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="<?php echo $ruta?>img/logo.ico" type="image/x-icon" rel="shortcut icon" /> 
     <link rel="stylesheet" type="text/css" href="css/reset.css"/> 
     <link rel="stylesheet" type="text/css" href="css/estilos.css"/> 
     <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/> 
     <link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css"/> 
     <script type="text/javascript" src="js/jquery-min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('svg').on('click', 'path,circle', function() { 
        var svg = $(this).parent().attr('id'); 
        /*$('#'+svg+' path').each(function() { 
        var parent = this.parentNode; 
        parent.removeChild(this); 
        }); 

        $('#'+svg+' circle').each(function() { 
        var parent = this.parentNode; 
        parent.removeChild(this); 
        });*/ 

        $('#' + svg + ' path').each(function() { 
         $(this).remove(); 
        }); 

        $('#' + svg + ' circle').each(function() { 
         $(this).remove(); 
        }); 

        var newItem = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); 
        newItem.setAttribute('cx', 23); 
        newItem.setAttribute('cy', 23); 
        newItem.setAttribute('r', 17.6); 
        newItem.setAttribute('stroke-width', '1'); 
        newItem.setAttribute('stroke', 'blue'); 
        newItem.setAttribute('fill', 'transparent'); 
        document.getElementById(svg).appendChild(newItem); 

        var newItem = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); 
        newItem.setAttribute('cx', 23); 
        newItem.setAttribute('cy', 23); 
        newItem.setAttribute('r', 7.5); 
        newItem.setAttribute('stroke-width', '0'); 
        newItem.setAttribute('stroke', '#000'); 
        newItem.setAttribute('fill', 'transparent'); 
        document.getElementById(svg).appendChild(newItem); 

        newItem = document.createElementNS("http://www.w3.org/2000/svg", 'path'); 
        newItem.setAttribute('d', 'M29,17 L36,10 Q23,0 10,10 L17,17 Q23,12 29,17 Z'); 
        newItem.setAttribute('stroke-width', '0'); 
        newItem.setAttribute('stroke', '#000'); 
        newItem.setAttribute('fill', 'transparent'); 
        document.getElementById(svg).appendChild(newItem); 

        newItem = document.createElementNS("http://www.w3.org/2000/svg", 'path'); 
        newItem.setAttribute('d', 'M17,17 L10,10 Q0,23 10,35 L17,29 Q12,23 17,17 Z'); 
        newItem.setAttribute('stroke-width', '0'); 
        newItem.setAttribute('stroke', '#000'); 
        newItem.setAttribute('fill', 'transparent'); 
        document.getElementById(svg).appendChild(newItem); 

        newItem = document.createElementNS("http://www.w3.org/2000/svg", 'path'); 
        newItem.setAttribute('d', 'M17,29 L10,35 Q23,46 36,35 L29,29 Q23,34 17,29 Z'); 
        newItem.setAttribute('stroke-width', '0'); 
        newItem.setAttribute('stroke', '#000'); 
        newItem.setAttribute('fill', 'transparent'); 
        document.getElementById(svg).appendChild(newItem); 

        newItem = document.createElementNS("http://www.w3.org/2000/svg", 'path'); 
        newItem.setAttribute('d', 'M29,29 L36,35 Q46,23 36,10 L29,17 Q34,23 29,29 Z'); 
        newItem.setAttribute('stroke-width', '0'); 
        newItem.setAttribute('stroke', '#000'); 
        newItem.setAttribute('fill', 'transparent'); 
        document.getElementById(svg).appendChild(newItem); 
       }); 
      }); 
     </script> 
     <style> 
      ul li{border-bottom: 1px solid #ccc; 
        display: block; 

      } 
      ul li:hover{ 
       background-color: #0C0; 
      } 

      svg{ 
       height:46px; 
       width:46px; 
       background-color:#DDD; 
      } 


     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <svg id="svi_16" xmlns="http://www.w3.org/2000/svg"> 
      <circle cx="23" cy="23" r="7.5" stroke="#000" stroke-width="1" fill="transparent" /> 
      <path d="M29,17 L36,10 Q23,0 10,10 L17,17 Q23,12 29,17 Z" stroke="#000" stroke-width="1" fill="transparent" /> 
      <path d="M17,17 L10,10 Q0,23 10,35 L17,29 Q12,23 17,17 Z" stroke="#000" stroke-width="1" fill="transparent" /> 
      <path d="M17,29 L10,35 Q23,46 36,35 L29,29 Q23,34 17,29 Z" stroke="#000" stroke-width="1" fill="transparent" /> 
      <path d="M29,29 L36,35 Q46,23 36,10 L29,17 Q34,23 29,29 Z" stroke="#000" stroke-width="1" fill="transparent" /> 
      </svg> 

      <svg id="svi_17" xmlns="http://www.w3.org/2000/svg"> 
      <circle cx="23" cy="23" r="7.5" stroke="#000" stroke-width="1" fill="transparent" /> 
      <path d="M29,17 L36,10 Q23,0 10,10 L17,17 Q23,12 29,17 Z" stroke="#000" stroke-width="1" fill="transparent" /> 
      <path d="M17,17 L10,10 Q0,23 10,35 L17,29 Q12,23 17,17 Z" stroke="#000" stroke-width="1" fill="transparent" /> 
      <path d="M17,29 L10,35 Q23,46 36,35 L29,29 Q23,34 17,29 Z" stroke="#000" stroke-width="1" fill="transparent" /> 
      <path d="M29,29 L36,35 Q46,23 36,10 L29,17 Q34,23 29,29 Z" stroke="#000" stroke-width="1" fill="transparent" /> 
      </svg> 
     </div> 

    </body> 
</html>

Demo

Source

2016-08-27 Alexander Ceballos

J'ai copié votre code à un violon here et testé. Dans l'ensemble, il semble fonctionner, tous les éléments au sein d'un svg un nettoyé et recréé. Mais dans quelques lignes que vous avez:

newItem.setAttribute('stroke-width', '0'); 
… 
newItem.setAttribute('fill', 'transparent');

si vous créez des éléments avec un remplissage transparent et sans contour, dans l'ensemble invisible.

Source

2016-08-27 05:33:47 philipp

Merci, vous avez raison, excusez-moi pour cela, je ne savais pas –

Svg ne permet pas de redessiner des objets

Répondre

Questions connexes