更改不透明度不適用於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

回答

相關問題