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

Question

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

// 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 方向上移动，它绝对不应该这样做。

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

Answer 1

你要的是transform()函数。

参见：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>

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

SVG.js move group containing symbol use element

javascript

typescript

svg

svg.js