单击时放大 SVG 组，然后最小化答案

【问题标题】：Enlarge SVG group on click, then minimize单击时放大 SVG 组，然后最小化
【发布时间】：2015-10-01 12:40:52
【问题描述】：

我在一个视口中有多组 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”。但这无济于事。

这是jsfiddle

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

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

代码有两个问题：

并非所有组都有 .continents 类，因此当您执行此操作时，并非所有大洲都会隐藏：
```
`$(".continents").css("display","none");`
```
只有亚洲和非洲有这个类，所以只有这两个会隐藏。
当你在这里设置transform属性时：
```
currentContinent.setAttribute("transform","scale(1.0)")
```
您不仅修改了scale() 的值，而且还覆盖/删除了翻译的值。

如何解决这些问题：

将.continents 类添加到所有组。
更新所单击大陆的scale 和translate 的值，而不仅仅是比例。这是棘手的部分：所有大陆的这些值可能并不相同。例如，对于亚洲，目标值为：translate(-400,439) scale(0.032,-0.032)，但这些值不适用于其他大陆。您需要使用不同的值来找到适合每个特定组的值。

You can see it working on this JSFiddle（请注意，只有亚洲可以使用，其他大陆将显示在图片之外，直到您调整平移/缩放值）。

为了使事情尽可能通用，您可以将新值存储在 data- 属性中（例如：data-transform），然后使用 data- 的值更新 transform 的值属性。

【讨论】：

【解决方案2】：

您没有在所有组元素上定义类，因此点击处理程序和 css 仅适用于其中 2 个组。

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

变换不好，因为路径要大得多，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");

        }
    });
}

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

【讨论】：