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

【问题标题】：Make loaded svg invisible in snap.svg使加载的 svg 在 snap.svg 中不可见
【发布时间】：2013-12-31 11:44:08
【问题描述】：

我已经加载了我的 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。

【问题讨论】：

您可以使用样式属性隐藏可见性，或者将不透明度更改为我猜的非常低的值？
我已经试过了，但是总是得到对象没有方法attr的错误信息
attr 方法有效，但您必须在组上使用它，而不是在图像上。

标签： javascript jquery svg raphael snap.svg

【解决方案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"
    });
}

【讨论】：

【解决方案2】：

另一种对我有用的方法：

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

（改编自this post）

【讨论】：

注：显示隐藏图像集 .attr({ display : "" })