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 definetly should not do.

SVG Elements structure

Use element moving wrong

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

Please replace the picture of code with a text-based minimal reproducible example — evolutionxbox
– evolutionxbox, Commented Mar 11, 2022 at 8:26

Paul LeBeau · Accepted Answer · 2022-03-11 10:02:01Z

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/[email protected]/dist/svg.min.js"></script>

answered Mar 11, 2022 at 10:02

Paul LeBeau

103k10 gold badges173 silver badges204 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fuzzyma Over a year ago

The x function should work just fine. Maybe this is really a bug

Collectives™ on Stack Overflow

SVG.js move group containing symbol use element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related