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에 코드를 복사하여 테스트했습니다. 결국 그것은 작동하는 것처럼 보입니다. 하나의 SVG 내의 모든 요소가 정리되고 다시 만들어집니다. 그러나 일부 라인에, 당신은 :

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

그래서 당신이 전부 보이지 않는에서, 투명한 채우기와 외곽선을 가진 요소를 만들 수 있습니다.

출처

2016-08-27 05:33:47 philipp

고마워요, 당신 말이 맞아요, 저를 용서해주세요, 나는 몰랐습니다. –

Svg가 객체를 다시 그리지 못하게 함

답변

관련 문제