按下放大SVG组，然后最小化

Question

我在一个视口中有多组svg元素。我希望用户点击一个组，这将隐藏其他组，并扩大选定的组，以填充视图。

到目前为止，我已经：

var continents = $(".continents")

    for (var i = 0; i < continents.length; i++) {
                continents[i].addEventListener('click', function(){
                    $(".continents").css("display","none");
                    var currentContinent=this;
                    currentContinent.setAttribute("transform","scale(1.0)")

                })
            }

其中的组被分类为".continents“。但这没什么用。

这是一个小提琴

是否可以创建缩放效果或简单地放大选定的组？

Answer 1

该守则有两个问题：

1. 并不是所有的组都有类.continents，所以当您这样做时，并不是所有的大陆都会隐藏： $(".continents").css("display","none"); 只有亚洲和非洲有这类人，所以只有这两个人才会躲起来。
2. 在这里设置属性transform时： CurrentContinent.setAttribute(“转换”、“缩放(1.0)”) 您不仅修改了scale()的值，而且还覆盖/删除了翻译的值。

如何解决这些问题：

1. 将类.continents添加到所有组中。
2. 更新已单击的大陆的scale和translate值，而不仅仅是刻度。这是一个棘手的问题:所有大陆的价值观可能都不一样。例如，对于亚洲，目标值将是：translate(-400,439) scale(0.032,-0.032)，但这些值将不适用于其他大陆。您需要使用不同的价值观来找到适合每个特定组的值。

您可以看到它在这个JSFiddle上工作。 (请注意，只有亚洲才能工作，其他大陆将显示在图片之外，直到您调整转换/缩放值)。

为了使事物尽可能泛化，可以将新值存储在data-属性中(例如：data-transform)，然后使用该data-属性的值更新transform的值。

Answer 2

您没有在所有组元素上定义类，所以单击处理程序和css只应用于其中的两个组。

此外，您还将所有显示设置为“无”，并且从不将选定组的显示设置为内联。

转换是不好的，因为路径要大得多，有一个倒y轴，并且是绝对定位的，所以将比例从0.017，-0.017改为1.0，1.0使它们远离视口。JSFiddle

var prevTransform = null;
var continents = $("g");

for (var i = 0; i < continents.length; i++) {

    continents[i].addEventListener('click', function () {

        var currentContinent = this;

        if (prevTransform == null) {

            console.log("Click!");
            $("g").css("display", "none");
            prevTransform = currentContinent.getAttribute("transform");
            currentContinent.setAttribute("transform", "translate(-20,220) scale(0.025, -0.025)");
            $(currentContinent).css("display", "inline");

        } else {

            currentContinent.setAttribute("transform", prevTransform);
            prevTransform = null;
            $("g").css("display", "inline");

        }
    });
}

在这个例子中，南美的效果最好，其他国家的动作太快了。澳大利亚移出了视线。