如何将SVG元素的内容复制到另一个SVG元素并保持同步

Question

具有两个SVG元素(SVG1和SVG2),其中SVG1是具有各种元素的大区域,其被不时地添加,移除和重新定位.另一方面,SVG2需要用作SVG1的图标化表示(小)版本,相当小,但无论SVG1显示什么,SVG2都以非常小的比例显示.

<SVG id="SVG1" width=1000 height=1000>
    <g transform="scale(1)">
    .... elements here....
    </g>
</SVG>

<SVG id="SVG2" width=100 height=100>
    <g transform="scale(0.1)">
    .... elements here....
    </g>
</SVG>

我相信这种方法是以编程方式同步最终在SVG1上的元素更改,因此它们最终也会出现在SVG2上,当然还有唯一的ID.

...但我想知道是否有一种更简单的方法可以确保像镜像功能或类似功能,或者扫描SVG1的DOM树并将其复制到SVG2中.

Answer 1

使第二个SVG只是<use>指向第一个的元素.您可以<use>使用变换进行缩放.它将始终自动反映您对第一个SVG所做的任何操作.

<svg width="100" height="100">
    <use transform="scale(0.1)" xlink:href="#SVG1"/>
</svg>