SVG не позволяет перерисовывать объекты

Я пытаюсь разработать одонтограмму, для этого мне нужно перерисовать зуб вместе с событием click, но проблема в том, что после этого я очищаю свой тег 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>

демонстрация

1 ответ

Решение

Я скопировал ваш код на скрипку и протестировал его. В целом все работает, все элементы в одном SVG очищены и воссозданы. Но в некоторых строках есть:

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

Таким образом, вы создаете элементы с прозрачной заливкой и без контура, в целом невидимые.

Другие вопросы по тегам