SVG.js 移动包含符号使用元素的组

Question

我在我的项目中使用 SVG.js 库，我试图在 x 方向上移动一个包含一些rect 、 text和一个use元素的组：

// create symbol, symbol can be anything
const symbol = svg.symbol().circle(10)  

//create group with elements
const group = svg.group();
const rect = group.rect();
const text = group.plain('some text');
const symbolUse = svg.use(symbol);
group.add(symbolUse);

//some time later...move group to new x coordinate (can be anything)
group.x(newX)

现在它可以很好地处理所有文本和矩形元素。 它们按照我希望的方式在 x 方向移动。 但是 use 元素以某种方式在 x 和 y 方向上移动，这是 def.netly 不应该做的。

现在这是 SVG.js 库中的错误，还是我遗漏了有关 use 元素的内容？

Answer 1

你想要的是transform() function。

请参阅： https://svgjs.dev/docs/3.0/manipulating/#transforming

 var svg = SVG().addTo('body').size(300, 300) const symbol = svg.symbol().circle(10) //create group with elements const group = svg.group(); const rect = group.rect(); const text = group.plain('some text'); const symbolUse = svg.use(symbol); group.add(symbolUse); // Move the whole group right by 150 units group.transform({translateX: 150});

 <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>