Svg 不允许重绘对象

Question

我正在尝试开发一个牙列图，为此我需要通过事件点击重新绘制完整的牙齿，但问题是在我清理我的 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

Answer 1

我已将您的代码复制到 fiddle here 并进行了测试。总而言之，它似乎有效，一个 svg 中的所有元素都被清除并重新创建。但是在某些行中你有：

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

因此您正在创建具有透明填充且没有轮廓的元素，所有这些元素都是不可见的。

Svg 不允许重绘对象

Svg does not allow to redraw objects

svg

object

redraw