javascript - 使用 svg.js 移动导入的 svg

Question

我正在尝试使用 svg.js 导入一个 svg 片段，然后对其进行偏移，但似乎我尝试使用的任何转换方法都不适用于导入的 svg。

我的代码:

var lang = SVG('lang').size(400,400)
var swe = lang.svg('<svg id="swe" width="65" height="40.625" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify" version="1.0" contentScriptType="text/ecmascript" contentStyleType="text/css" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="navy"/>' +
'<g transform="scale(4.0625)">' +
'    <rect x="5" width="2" height="10" fill="gold"/>' +
'    <rect y="4" width="16" height="2" fill="gold"/>' +
'</g></svg>')

swe.dx(100).dy(50) <-- this line does nothing.

也没有任何其他应该翻译的方法，如 x()、transform() 或 move()

我试过制作一个矩形并导入到同样不起作用的矩形中:

var flag = lang.rect(65, 40.625)
var swe = flag.svg(<svg code>)
swe.dx(100).dy(50)

我在文档中找不到任何让我更聪明的东西。有没有人有这方面的经验？

Answer 1

首先:一个矩形元素不能有任何 child ，所以你最后的方法是胡说八道。

此外，不允许转换 svg 元素，因此转换也不起作用。另一方面，x 和 y 属性仅适用于嵌套 svg 而不适用于根 svg。

您可以创建一个组，在那里导入 svg 并移动该组。或者您可以遍历根 svg 的所有子项并移动它们(您可以使用 children().each() 方法遍历子项。