.useはSVG.jsの.svg要素を複製していません

Question

.use関数を使用してインポートされたインラインSVGを掛けようとすると、空の要素がレンダリングされますが、同じ関数は矩形のような単純なものでうまく動作します。 SVG.jsは複雑な要素を複製できますか？ 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

うーん...それはあなたがsvg()を注入した要素にuse()をリンクさせませんsvg.jsのように見えます。

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>