.use ne clone pas les éléments .svg dans SVG.js

Question

Lorsque j'essaie de multiplier le bye SVG en ligne importé en utilisant la fonction .use, il restitue un élément vide mais la même fonction fonctionne parfaitement avec quelque chose d'aussi simple qu'un rectangle. SVG.js est-il capable de cloner des éléments complexes? HTML:

<div id="container"></div> 

js:

var draw = SVG('container').size(300, 300); 
var man = draw.svg('<g><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M127.86,7.472l-17.996,56.5L127.86,103l17.997-39.027 L127.86,7.472z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#FED000" d="M127.86,54.687l-17.046,53.517l17.046,17.847l17.045-17.847 L127.86,54.687z"/><g><g><path fill-rule="evenodd" clip-rule="evenodd" fill="#222222" d="M153.923,64.133l-0.038-0.017l-6.771-2.073 c-1.072-0.331-2.217,0.239-2.596,1.287L130.27,93.222c-0.818,2.256-4.008,2.256-4.825,0L111.21,63.331 c-0.309-0.847-1.12-1.382-1.977-1.382c-0.205,0-0.414,0.025-0.624,0.095l-6.766,2.073c-8.65,2.877-14.433,10.899-14.433,19.973 v41.332c0,0.416,0.131,0.812,0.346,1.15l14.867,22.618v103.866c0,1.161,0.938,2.098,2.105,2.098h46.269 c1.158,0,2.104-0.937,2.104-2.098V149.188l14.859-22.618c0.232-0.338,0.349-0.734,0.349-1.15V83.978 C168.31,74.95,162.507,66.938,153.923,64.133z"/></g><circle fill-rule="evenodd" clip-rule="evenodd" fill="#FED000" cx="128.204" cy="25.5" r="24.78"/></g></g>'); 
var rect = draw.rect(50,100).fill("white"); 

var use1 = draw.use(man).move(20, 20); 
var use2 = draw.use(rect).move(51, 51); 

https://codepen.io/1GR3/pen/QqYrxE

Answer 1

Hmmm .. il semble que svg.js ne vous permet pas de lier un use() aux éléments injectés avec svg().

Vous devrez peut-être recréer les objets avec les primitives svg.js.

var draw = SVG('container').size(300, 300); 
 

 
var man = draw.group(); 
 
man.path("M127.86,7.472l-17.996,56.5L127.86,103l17.997-39.027 L127.86,7.472z").fill("#ffffff"); 
 
man.path("M127.86,54.687l-17.046,53.517l17.046,17.847l17.045-17.847 L127.86,54.687z").fill("#fed000"); 
 
man.path("M153.923,64.133l-0.038-0.017l-6.771-2.073 c-1.072-0.331-2.217,0.239-2.596,1.287L130.27,93.222c-0.818,2.256-4.008,2.256-4.825,0L111.21,63.331 c-0.309-0.847-1.12-1.382-1.977-1.382c-0.205,0-0.414,0.025-0.624,0.095l-6.766,2.073c-8.65,2.877-14.433,10.899-14.433,19.973 v41.332c0,0.416,0.131,0.812,0.346,1.15l14.867,22.618v103.866c0,1.161,0.938,2.098,2.105,2.098h46.269 c1.158,0,2.104-0.937,2.104-2.098V149.188l14.859-22.618c0.232-0.338,0.349-0.734,0.349-1.15V83.978 C168.31,74.95,162.507,66.938,153.923,64.133z").fill("#222222"); 
 
man.circle(49.56).move(128.204 - 24.78, 25.5-24.78).fill("#fed000"); 
 

 
var rect = draw.rect(50,100).fill("white"); 
 

 
var use1 = draw.use(man).move(20, 20); 
 
var use2 = draw.use(rect).move(51, 51);

body { 
 
    color: white; 
 
    background: black; 
 
    margin: 0; 
 
    min-height: 100vh; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
} 
 
#container { 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 475px; 
 
    height: 320px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script> 
 

 
<div id="container"> 
 

 
</div>