1

I'm using the svg.js library to load an svg file, to add its points (images) and to animate the points. I load the svg file in PHP and generate the code to embed it in the html.

Here is how my html code looks:

<div class="svg-element">
    <svg id="svgId" ...>
        <!-- SVG code -->
    </svg>
</div>

This is how my javascript code looks:

var svg = SVG.get('svgId');
svg.size('100%', '100%');

var point = svg.image(point_url);
point.attr('id', 'pointId');
point.move(100, 100);

That code works perfectly but the problem comes when I use the scale() function to make a zoom effect with the points.

point.scale(0.5);

or the transform function:

point.transform({scaleX : '0.5', scaleY : '0.5'});

A TypeError: SVG.parser is undefined error is shown in the javascript console.

How can I avoid that problem and use the transform method with the images? The problem may be that I use the .get() function, how I can create the SVG object with the svg file?

IBam
  • 10,114
  • 1
  • 24
  • 36
ilazgo
  • 650
  • 2
  • 11
  • 35

1 Answers1

0

The solution is silly and easy:

var svg = SVG('svgId');

instead of using the .get() function.

You have to use the SVG() constructor with the SVG id, not the .get() function, I'm confused with this because this answer says that you can use .get() to retrieve the SVG.

Community
  • 1
  • 1
ilazgo
  • 650
  • 2
  • 11
  • 35
  • The linked answer also says: " method *after* importing raw svg:". The get method is for elements in the svg doc not the doc itself – Fuzzyma Oct 14 '15 at 22:22