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>使用变换。它总是会自动反射(reflect)你对第一个 SVG 所做的一切。

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