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>