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

我正在构建一个简单的地图，并且需要正确的svg方向线才能在输入上显示，而其他任何方向线都会消失。此代码在Firefox中工作，但不在Chrome或Safari中。 webkit有不同的处理方式吗？谢谢您的帮助！更改不透明度不适用于Chrome中的JS和SVG

的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); 
      } 
     });  
    }

来源

2014-09-29 Gantrof

不知道有关它如何工作与jQuery，但它可能是什么干扰。在任何情况下，你都可以查看jQuery如何在内部处理svg内容 - 甚至可以找到compability表，polyfills或修复不兼容问题的插件。此外，这可能会帮助您检查自己：http://tests.caniuse.com/ - 它使用modernizr来查看您的浏览器是否支持这些内容 - 它可能会使细节更清晰。如果你还没有检查过，直接使用[caniuse]（http://caniuse.com）也是一个好主意。 – mechalynx 2014-09-29 01:33:03

尝试“-webkit-transition” – defghi1977 2014-09-29 07:20:09

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

在本地JS，这个工作的SVG路径上的Safari：

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

来源

2014-09-29 01:42:49 Moustachiste

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

回答

相关问题