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