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

首先：一个矩形元素不能生孩子，所以你最后的方法是无稽之谈。

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

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

Answer 2

有两种方法可以移动图形。第一个是简单地使用CSS来重新定位＆＃34; lang＆＃34; 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);

请注意，我给了这个组一个id。我还将海军背景移到了小组中，所以它会随处移动。

Answer 3

根据您发布的代码，您正在创建一个包含SVG()的SVG文档，并将另一个SVG文档导入其中，这根本没有任何意义。

您应首先将SVG文档导入div标签：

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

然后您可以使用SVG.get()获取SVG文档。

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

之后，您应该能够操作文档中的元素。使用swe.children()或您在SVG.js上找到的其他参考方法来获取SVG元素。

Answer 4

您必须首先为其创建一个组，然后将其导入该组。像这样：

var draw = SVG('drawing').size(400, 400);
var casing = draw.group();
casing.svg('<g><rect x="100" y="100" width="50" height="50" style="fill: blue" /> </g>');
casing.move(50, 50);
casing.animate({
  duration: 4000
}).rotate(360).loop();

<html>

<body>
  <div id="drawing"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
</body>

</html>

使用svg.js移动导入的svg

4 个答案: