Question

我正在使用http://snapsvg.io/ 当用户点击芯片进行下注时，它应该显示具有芯片颜色的svg图像，然后如果用户点击另一个芯片，则应该显示该新芯片。确实如此，但是在添加不同的svg内容之前我无法删除内容，所以发生的事情是svg被置于之前的svg之上。

我真的不想追加更多内容，我想替换它。但我似乎除了.append（）之外没有找到任何其他选项这就是为什么我在追加之前尝试.removeData（）但不起作用的原因。它不断将下一个svg图像放在上一个svg图像之上。我希望我在这里有点意义。

这就是我的代码在做出反应时的样子。

         componentWillReceiveProps () {
           if (this.props.chipSelectedSvg) {
             const tipChipSnap = snap('#tipChip');
             const tipChipSvgContent = Snap.parse(this.props.chipSelectedSvg.content);
             tipChipSnap.removeData();
             tipChipSnap.append(tipChipSvgContent);
            }
         }

         render () {

           return (
             <div id="tips-tooltip-container" style={{visibility : tooltip}}> 
               <svg id="tipChip" className="chip" viewBox="-15 -20 120 120"></svg>
             </div>
         }

Answer 1

使用Element.remove()方法。

http://snapsvg.io/docs/#Element.remove

使用snapsvg从svg标记中删除内容

1 个答案: