要编辑SVG而不是重新创建,可以使用JavaScript和SVG DOM来实现。以下是一个简单的示例代码,展示如何通过更改SVG元素的属性来编辑SVG。
这个示例中,点击按钮时会调用editSVG()
函数,该函数会获取SVG元素和要编辑的元素,并通过setAttribute()
方法修改元素的属性。此外,还会使用createElementNS()
方法创建一个新的矩形元素,并通过setAttribute()
方法设置其属性,最后使用appendChild()
方法将其添加到SVG中。
运行上面的代码,点击按钮后,SVG中的圆形元素将会被修改为新的位置和颜色,并且会添加一个新的矩形元素。这样就实现了通过编辑SVG来更新图形的效果。