javascript - .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() 注入(inject)的元素。

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