SVG要素の内容を別のSVG要素にコピーして同期を維持する方法

Question

SVG1がSVG1とSVG2の2つの要素を持ち、SVG1がさまざまな要素を持つ大きな領域であり、時々追加、削除、再配置されます。一方、SVG2は、アイコン化された（小）バージョンのSVG1として動作するために使用する必要がありますが、SVG1が示すものはどれも非常に小規模です。

<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> 

私はアプローチが、彼らはまた、SVG2に終わるので、プログラムのコースの固有のIDと、SVG1に終わる要素の変更を同期させることであると信じています。

...ミラーリング機能のようなものや、SVG1のDOMツリーをスキャンしてSVG2に複製するといった、より単純な方法があるかどうかは疑問です。

Answer 1

第2のSVGを最初のものを指す<use>要素にします。変換を使用して<use>をスケールすることができます。それは常にあなたが何をしても最初のSVGに自動的に反映されます。

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