svg - SVG 要素のコンテンツを別の SVG 要素にコピーして同期を維持する方法

Question

2 つの 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

2 番目の SVG<use>を、最初の SVG を指す単なる要素にします。<use>変換を使用してスケーリングできます。最初の SVG に対して行ったことは常に自動的に反映されます。

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