Question

目前，当我创建SVG文档时，我使用单个“canvas”svg对象，如下所示：

<svg id="svgCanvas" xmlns="http://www.w3.org/2000/svg" 
   xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"></svg>

然后我这样说：

var svgCanvas = document.getElementById( "svgCanvas" );

然后将所有SVG对象作为子对象添加到此对象。例如，如果我创建一行，我会这样做：

    function createLine( id, x1, y1, x2, y2, color, width ){
        var svgCanvas = document.getElementById( "svgCanvas" );
        var line  = document.createElementNS( svgNS, "line" );
        line.setAttributeNS( null, "id", id );
        line.setAttributeNS( null, "x1", x1 );
        line.setAttributeNS( null, "y1", y1 );
        line.setAttributeNS( null, "x2", x2 );
        line.setAttributeNS( null, "y2", y2 );
        line.setAttributeNS( null, "stroke", color );
        line.setAttributeNS( null, "stroke-width", width );
        svgCanvas.appendChild( line );
    }

问题在于我的绘图同时具有静态和动态元素。有些东西四处移动，被删除和重新绘制，改变形状等。其他东西是静态的，永久保持不变。

当我清除画布时，我不想删除这些永久对象，我只想删除可更改的对象。所以，理想情况下我希望有一种容器是svg对象（svgCanvas）的子容器，它只包含动态对象，所以当我清楚时我可以迭代该容器并删除它的子容器，然后离开静态对象是主svgCanvas的子对象。

有没有办法制作一个这样的“容器”，它是svgCanvas的子对象，仍然在svg上呈现容器中的所有对象？

另外，我是否可以通过移除容器来删除所有这些项目，而不需要遍历容器中的每个对象并单独删除它们？

*更新*

我添加了一个组如下：

    function initialize(){
        svgCanvas = document.getElementById( "svgCanvas" )
        gDynamic  = document.createElementNS( svgNS, "g" );
        gDynamic.setAttribute( "id", "DynamicGroup" );
        svgCanvas.appendChild( gDynamic );
    }

但是，执行此操作后，将显示添加到svgCanvas的所有对象，但不会显示子组中的任何对象。

Answer 1

<g>和<svg>元素都充当其他元素的容器。从文档中删除它们也会删除所有孩子。

Answer 2

您需要使用群组。并且您将需要修改元素创建函数，以便您可以传入应添加到哪个父元素。

var svgCanvas = document.getElementById( "svgCanvas" );

// Create a group
var svgGroup = createGroup(svgCanvas, "myGroupId");
// Add a line to the group
createLine(svgGroup, ...etc...);

// do stuff

// Done with group, so remove it, and its children
svgGroup.parentNode.removeChild(svgGroup);


function createLine( parent, id, x1, y1, x2, y2, color, width ) {
    var line  = document.createElementNS( svgNS, "line" );
    line.setAttribute( "id", id );
    line.setAttribute( "x1", x1 );
    line.setAttribute( "y1", y1 );
    line.setAttribute( "x2", x2 );
    line.setAttribute( "y2", y2 );
    line.setAttribute( "stroke", color );
    line.setAttribute( "stroke-width", width );
    parent.appendChild( line );
}

function createGroup( parent , id ) {
    var group  = document.createElementNS( svgNS, "g" );
    group.setAttribute( "id", id );
    parent.appendChild( group );
}

使用多个子容器进行SVG渲染？

2 个答案: