Question

我的功能就像这样简单：

function changeColor(color, opacity, obj) {
    var colors = obj.getElementsByClassName("color_elem");

    for (var i = 0; i < colors.length; i++) {
        mainInterface.makeToast("Color " + i + ": " + color);
        colors[i].style.stopColor = color;
        colors[i].style.stopOpacity = opacity;
        //colors[i].setAttribute("stop-color", color);
        //colors[i].setAttribute("stop-opacity", opacity);
    }
}

可以多次调用此函数。它是通过按钮单击事件或通过界面触发的。作为参数，它获得了类似#FFFFFF的颜色，0到1之间的不透明度以及在任何情况下都是svg元素的obj。

首先调用该函数时，它会像我期望的那样改变颜色。第二次打电话，它不会。它将保留第一个函数调用所分配的颜色。

mainInterface.makeToast("Color " + i + ": " + color); {I}确保我确实拥有正确的颜色。

我尝试使用css属性以及属性。（见评论）

有关于此的任何想法吗？

Answer 1

在某些浏览器中似乎是错误，我在Chrome（62.0.3202.94）和Opera（49.0.2725.39）中遇到了同样的问题，但在Firefox Dev（58.0b5）和Edge（ 38.14393.0.0）。

在没有工作的浏览器中，当窗口调整大小时，SVG转向正确的颜色;所以我的黑客是修改＆＃34; （我说＆＃34;修改＆＃34;因为你可以保留原始值并且也可以工作）JS代码中的SVG高度。

因此，如果您的SVG元素高度为100px，则可以在更改了停止颜色后执行此操作：

$('#svg').attr("height","100px");

（我在示例中使用了JQuery，因为我无法使这个hack与纯JS一起工作，不知道为什么抱歉）

只能改变＆＃34;停止颜色＆＃34;一次使用JavaScript

1 个答案: