javascript - Make loaded svg invisible in snap.svg

Question

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.

Answer 1

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

Answer 2

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)