更改不透明度不适用于Chrome中的JS和SVG

Question

我正在构建一个简单的地图，需要正确的svg方向线在输入时显示，而其他方向线都会逐渐消失。这段代码可以在Firefox中使用，但不能在Chrome或Safari中使用。webkit有不同的处理方式吗？谢谢你的帮助！

Javascript：

function getDirBut(){
        var input = $('.roomname').html();
        $('.direction').each(function(){
            var i = this;
            if($(i).attr('id') != ("d" + input) && $(i).attr('id') != undefined){
                $(i).css("transition","0.8s ease all");
                $(i).css('opacity',0);
            }else if($(i).attr('id') == ("d" + input)){
                $(i).css("transition","0.8s ease all");
                $(i).css('opacity',1);
            }
         });    
  }

Answer 1

您可以尝试针对svg的不透明度属性，而不是CSS。

在原生JS中，这在Safari:中的svg路径上工作

localSvgDoc.getElementById('myId').setAttribute('opacity', 0.3)