SVG.js move group containing symbol use element

Question

I'm using the SVG.js library in my project and I'm trying to move a group containing some rect , text and one use element in x direction:

// 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)

Now it works completely fine with all the text and rect elements. They move just the way I want them to in x direction. But the use element somehow moves in x AND y direction, which it def.netly should not do.

Now is this a bug from the SVG.js library or am I missing something regarding the use element?

Answer 1

What you want is the transform() function.

See: 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>