Svgでオブジェクトを再描画することはできません

歯列矯正を開発しようとしています。イベントのクリックで歯を完全に再描画する必要がありますが、それ以降は自分のsvgタグをきれいにすることができません。私が最初に定義した同じ座標で必要なすべてのオブジェクトを再描画し、解決しようとしましたが、できませんでした。最初の要素を再描画しますが、別の要素は再描画しません。Svgでオブジェクトを再描画することはできません

私のソースコード：

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

出典

2016-08-27 Alexander Ceballos

私はフィドルhereにあなたのコードをコピーして、それをテストしています。すべてのことがうまくいくように見えますが、1つのSVG内のすべての要素がクリアされて再作成されます。しかし、いくつかの行であなたが持っている：

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

ので、あなたはすべてのすべての目に見えない中で、透明の塗りつぶしなしアウトラインで要素を作成しています。

出典

2016-08-27 05:33:47 philipp

ありがとうございます、あなたは正しいです、私はそのことを言い訳します、私は気づいていません –

Svgでオブジェクトを再描画することはできません

答えて

関連する問題