4

I'm trying to import an svg snippet with svg.js and then offset it, but it seems like any transformation method I try to use don't work with imported svg.

The code I have:

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.

Nor does any other method that are supposed to translate work, like x(), transform() or move()

I have tried making a rectangle and importing into that which also doesn't work:

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

I can't find anything in the docs that make me any wiser. Is there anyone who has experience with this?

klesus
  • 196
  • 6
  • Think of an SVG as an image. If you want to transform an image you must use CSS or DOM. It does not matter what you do inside the image. It will not change where it is rendered on the page. Right now, you are **only** manipulating what is happening inside the image. – dotnetCarpenter Mar 08 '17 at 00:01

4 Answers4

2

First of all: a rect-element cant have any children so your last approach is nonsense.

Furthermore it is not allowed to transform an svg element so transform won't work either. x and y properties on the other hand only work on nested svgs but not on the root svg.

You can create a group, import the svg there and move the group. Or you can loop through all children of your root svg and move them (you can loop through children with the children().each() method.

Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
1

There are two ways to move your graphic around. The first would be to simply use CSS to reposition the "lang" div tag.

If you really want to move your graphic around inside the svg document with svg.js function calls you could do something like the following.

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);

Notice that I gave the group an id. I also moved the navy background into the group so it would move around with everything else.

This example will not work with SVG.js v3 (SVG.get function is deprecated for this use).

Bart Mulckhuijse
  • 3
  • 3
HeadCode
  • 2,770
  • 1
  • 14
  • 26
0

By the code you posted, you're creating a SVG document with SVG() and imported another SVG document into it, which doesn't make any sense at all.

You should import your SVG document into your div tag first:

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

Then you can use SVG.get() to get SVG document.

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

After that, you should be able to manipulate elements in the document. Use swe.children() or other reference method you can find on SVG.js to get your SVG elements.

Pue-Tsuâ
  • 116
  • 1
  • 6
0

You have to create a group for it first and then import it into the group. Like this:

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>
partofthething
  • 1,071
  • 1
  • 14
  • 19