3

I have loaded my svg image, but now I want to make it invisible. And I can't find a way to do it ...

var snapObj = Snap("#svgElement");
var group = snapObj.group();
var svgImage;

Snap.load("../img/image.svg", onImageLoaded);

function onImageLoaded(f) {
    svgImage = f;
    group.append(svgImage);
}

So now I need to know which attribute of svgImage I have to change the visibility of the image to false.

EMerckx
  • 182
  • 1
  • 10
  • you could use the style attr to visibility hidden, or change the opacity to something very low I guess? – Ian Dec 31 '13 at 11:59
  • I already tried, but I always get the error message that the object doesn't have the method attr – EMerckx Dec 31 '13 at 12:39
  • The attr method worked, but you have to use it on the group, and not on the image. – EMerckx Dec 31 '13 at 14:39

2 Answers2

8

A friend of mine helped me to solve the question, you can only use the attr method on a group and not on the loaded svg. So you need to add the loaded svg to a group.

var snapObj = Snap("#svgElement");
var group = snapObj.group();
var svgImage;

Snap.load("../img/image.svg", onImageLoaded);

function onImageLoaded(f) {
    // we add the svg to a group
    svgImage = snapObj.group().append(f);
    // we add the group with the svg to our other group
    group.append(svgImage);

    // and we can set the visibility to hidden 
    // and the image in group will be invisible
    svgImage.attr({
        visibility: "hidden"
    });
}
EMerckx
  • 182
  • 1
  • 10
5

Another way that worked for me:

var myPaper = Snap("#svgElement");
var theImage = myPaper.image("../img/image.svg");
theImage.attr({ display : "none" });

(adapted from this post)

Tim Erickson
  • 582
  • 5
  • 15