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)")

                })
            }

哪些群体被归类为＆＃34; .continents＆＃34;。但这没有任何作用。

这是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

代码有两个问题：

并非所有群组都有类.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），然后使用以下内容更新transform的值data-属性的值。

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

2 个答案: