EMerckx EMerckx - 3 months ago 15
Javascript Question

Make loaded svg invisible in snap.svg

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

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