.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.js不會讓你鏈接use()與svg()注入的元素。

您可能必須使用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>