在 Chrome 中更改不透明度不适用于 JS 和 SVG答案

【问题标题】：Changing opacity not working with JS and SVG in Chrome在 Chrome 中更改不透明度不适用于 JS 和 SVG
【发布时间】：2014-09-29 09:42:49
【问题描述】：

我正在构建一个简单的地图，并且需要正确的 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);
            }
         });    
  }

【问题讨论】：

不确定这如何与 jQuery 一起使用，但它可能是干扰因素。在任何情况下，您都可以四处看看 jQuery 如何在内部处理 svg 内容——甚至可能会找到兼容性表、polyfill 或修复不兼容性的插件。此外，这可能会帮助您自己检查：tests.caniuse.com - 它使用modernizr 来查看您的浏览器是否支持某些东西 - 它可能会使细节更清晰。如果您还没有检查过，直接使用caniuse 也是一个好主意。
试试“-webkit-transition”

标签： javascript jquery html css svg

【解决方案1】：

您可以尝试以 svg 的 opacity 属性而不是 CSS 为目标。

在原生 JS 中，这适用于 Safari 中的 svg 路径：

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

【讨论】：