2

heres a pen of what i'm trying to do: http://codepen.io/amcc/pen/RVVRPX/ (simplified code below too)

i'm importing raw svg, then nesting it - as this is needed to allow it to be dragged. I want to be able to rescale the svg, whats the best way?

line 12 shows me trying to use size() which isn't doing much

var rawsvg1 = '<g><path d="M265.8,171.5V49H297v122.5H265.8z"/></g>';
var draw = SVG('drawing').size('100%', '100%');
var groupContainer = draw.nested();

var group1 = groupContainer.nested();
group1.svg(rawsvg1);
//change group1 attributes
group1.size(50, 50);
amcc
  • 523
  • 5
  • 16

1 Answers1

3

then nesting it - as this is needed to allow it to be dragged.

Why do you think that?

There is no need for all those nested <svg> elements you are creating. A group (<g>) works just as well.

And you can resize the content you are "importing" by using the transform functions.

var draw = SVG('drawing').size('100%', '100%');

var group1 = draw.group();
group1.svg(rawsvg1);
//change group1 attributes
group1.attr('fill', '#fff');
group1.translate(200,100).scale(0.5,0.5);
//make group1 draggable
group1.draggable();
group1.draggable().on('dragmove', function(e){ })

Updated codepen

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • thanks thats exactly what i wanted. The reason for mucking about with nested was to try and get the 'size' function to work and somewhere in the documentation about groups it said that it couldn't be sized. 'scale' was exactly what i should have been doing, cheers – amcc May 01 '17 at 18:41
  • note that putting the imported code in a nested element makes it possible to use the viewbox attribute. With viewbox you can zoom and translate the content as normal. – Fuzzyma May 03 '17 at 10:42