Javascript 使用svg.js移动导入的svg

我试图用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.

---

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

首先：rect元素不能有任何子元素，所以您最后的方法是胡说八道

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

---

您可以创建一个组，将svg导入其中并移动该组。或者您可以循环遍历根svg的所有子级并移动它们（您可以使用

children（）.each（）

方法循环遍历子级。

通过您发布的代码，您正在使用

svg（）

创建一个svg文档，并将另一个svg文档导入其中，这毫无意义

您应该首先将SVG文档导入到div标记中：

document.getElementById('lang').innerHTML = (yourSvgCode);

然后可以使用

SVG.get（）

获取SVG文档

var swe = SVG.get('swe');

---

之后，您应该能够操作文档中的元素。使用

swe.children（）

或您可以在上找到的其他参考方法来获取SVG元素。

有两种方法可以移动图形。第一种方法是简单地使用CSS重新定位“lang”div标记

如果您确实希望通过svg.js函数调用在svg文档中移动图形，可以执行以下操作

var lang = SVG('lang').size(800,800)
var swe = lang.svg('<svg id="swe" 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">' +
'<g transform="scale(1)" id="my_flag">' +
'    <rect width="65" height="40.625" fill="navy"/>' +
'    <rect x="15" width="5" height="40.625" fill="gold"/>' +
'    <rect y="15" width="65" height="5" fill="gold"/>' +
'</g></svg>')

var flag = SVG.get("my_flag"); 
flag.move(5,5);

var lang=SVG（'lang'）。大小（800800）
var swe=lang.svg（“”+
'' +
'    ' +
'    ' +
'    ' +
'')
var flag=SVG.get（“my_flag”）；
旗帜。移动（5,5）；

请注意，我给了这个组一个id。我还将海军背景移到了这个组中，这样它就可以和其他所有东西一起移动

---

此示例不适用于SVG.js v3（不推荐使用SVG.get函数）。

您必须先为其创建一个组，然后将其导入该组。如下所示：

var draw=SVG（'draw'）。大小（400400）；
变量套管=draw.group（）；
外壳.svg（“”）；
套管移动（50，50）；
动画({
持续时间：4000
}).rotate（360）.loop（）；

---

将SVG视为图像。如果要转换图像，必须使用CSS或DOM。在图像内部执行的操作无关紧要。它不会更改图像在页面上的呈现位置。现在，您只需处理图像内部发生的事情。

var lang = SVG('lang').size(800,800)
var swe = lang.svg('<svg id="swe" 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">' +
'<g transform="scale(1)" id="my_flag">' +
'    <rect width="65" height="40.625" fill="navy"/>' +
'    <rect x="15" width="5" height="40.625" fill="gold"/>' +
'    <rect y="15" width="65" height="5" fill="gold"/>' +
'</g></svg>')

var flag = SVG.get("my_flag"); 
flag.move(5,5);