CODEWITHSUNDEEP
svgsvg.js
amcc
amcc

Reputation: 543

resize nested and imported svg with svg.js

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

Upvotes: 2

Views: 1321

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

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

Upvotes: 3

Related Questions