在snap.svg中使加载的svg不可见

Question

我已经加载了我的svg图像,但现在我想让它变得不可见.我找不到办法做到这一点......

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

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

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

所以现在我需要知道svgImage的哪个属性我必须将图像的可见性更改为false.

Answer 1

我的一个朋友帮助我解决了这个问题,你只能在一个组上使用attr方法,而不是在加载的svg上.因此,您需要将加载的svg添加到组中.

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

另一种对我有用的方法:

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

(改编自这篇文章)