Bir SVG öğesinin içeriğini başka bir SVG öğesine kopyalama ve eşitleme nasıl yapılır

Question

İki SVG öğesine (SVG1 ve SVG2) sahip olması, SVG1'in çeşitli öğeler içeren, zaman zaman eklenmiş, kaldırılmış ve yeniden konumlandırılan geniş bir alan olması. Diğer taraftan SVG2'nin SVG1'in sembolize reppentasyonu (küçük) sürümü olarak hareket etmesi için kullanılması gerekir, ancak SVG1 ne olursa olsun, SVG2 çok küçük bir ölçekte gösterilir.

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

Ben yaklaşım onlar da SVG2 üzerinde sonuna kadar böylece programlı ders benzersiz kimliklerle, SVG1 üzerinde son eleman değişiklikleri senkronize etmek olduğuna inanıyoruz.

... ama aynalama özelliği veya SVG1'in DOM ağacını tarayan veya SVG2'ye kopyalayan bir şey gibi daha kolay bir yol olup olmadığını merak ediyorum.

Answer 1

İkinci SVG'yi ilk önce işaret eden bir <use> öğeyi yapın. Bir dönüşüm kullanarak <use>'u ölçekleyebilirsiniz. İlk SVG'ye yaptığınız her şeyi otomatik olarak yansıtacaktır.

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