1

I am using Snap Svg Animator (https://github.com/cjgammon/SnapSVG-Animator), that uses Snap SVG internally.

I am able to transform the created SVG with the following command:

   comp.mc.el.transform('translate(100,190)');

But I am not able to make the following work:

comp.mc.el.attr('{viewBox:0, 0, 300, 500}'); 
//also tried removing quotation
comp.mc.el.attr({viewBox:0, 0, 300, 500});

References: snap svg : change viewBox using parameters

I want to scale the svg. But the output doesnot reflect the change.

Vishwas
  • 1,533
  • 2
  • 19
  • 40
  • I don't know snap, but viewBox essentially sets the size of the canvas before scaling. SVG has size and width attributes for the display size. Scaling should happen automatically, assuming it is scaled proportionally. – Chris Aug 29 '17 at 06:47
  • But I don't see it scaling responsively, when the browser is resized. It does scale only when I am zooming in/out the browser view. Here is the link live: http://freelancesoftwareservices.com/svg/exp-html5.html – Vishwas Aug 29 '17 at 07:31
  • Try removing the height and width attributes or set sizing with CSS. Without given dimensions, it will scale to fit it's container. – Chris Aug 29 '17 at 07:44
  • Try comp.mc.el.attr({ viewBox: "0, 0, 300, 500" }); – Ian Aug 29 '17 at 09:51
  • Nope, doesn't work : http://freelancesoftwareservices.com/svg/exp-html5.html – Vishwas Aug 29 '17 at 10:11
  • 1
    You are putting the viewBox on the 'g' element, which won't work. The viewBox would need to be on the 'svg' element (and attr({ viewBox: "0 0 300 500" }); without the commas). Or if you are using the 'g' element only, scale and translate eg comp.mc.el.transform('t100,190s2') would translate and then scale by 2 around the center of the element. – Ian Aug 30 '17 at 05:41
  • Ok, thanks it works now. Snap SVG syntax are difficult to understand though. :) – Vishwas Aug 30 '17 at 07:21

0 Answers0