.use is not cloning .svg elements in SVG.js

Question

When I try to multiply the imported inline SVG bye using .use function it renders an empty element but the same function works just fine with something as simple as rectangle. Is SVG.js capable of cloning complex elements? 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

Paul LeBeau · Accepted Answer · 2017-10-19T19:41:21.667

Hmmm.. it looks like svg.js doesn't let you link a use() to elements injected with svg().

You may have to recreate the objects with svg.js primitives.

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>

I didn't learn how to use complex graphic tools to recreate elements with primitives! Oh, what a degeneracy... — 1GR3, Oct 19 '17 at 19:26
I'm just a little bit grumpy because 15 years ago I would do all of this in a snap, all in one place and it would look exactly the same in each browser that would have that evil plugin installed :) Thank you! — 1GR3, Oct 19 '17 at 19:44

.use is not cloning .svg elements in SVG.js

1 Answers1