单击可放大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”。 但这无济于事。

这是一个jsfiddle

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

Answer 1

您没有在所有组元素上定义类，因此单击处理程序和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");

        }
    });
}

在这个例子中，南美表现最好，其他国家则走得太远了。 澳大利亚移出视野。

Answer 2

该代码有两个问题：

1. 并非所有组都具有.continents类，因此执行此操作时，并非所有大洲都将隐藏：

    `$(".continents").css("display","none");` 

   只有亚洲和非洲确实有该阶级，所以只有这两个会躲起来。

2. 在此处设置属性transform ：

    currentContinent.setAttribute("transform","scale(1.0)") 

   您不仅要修改scale()的值，而且还要覆盖/删除翻译的值。

---

如何解决这些问题：

1. 将.continents类添加到所有组中。

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

您可以看到它在此JSFiddle上运行 （注意，只有亚洲可以使用，其他大洲将显示在图片之外，直到您调整平移/缩放值为止）。

为了让事情尽可能的通用，你可以存储在一个新的数值data-属性（如： data-transform ），然后更新的值transform通过使用值data-属性。