svg - 如何将 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>