feColorMatrix在Firefox中无法生效，SVG图标着色问题求助

我在Firefox浏览器中遇到异常问题：尝试通过feColorMatrix滤镜为SVG图标设置颜色，该功能在Chrome和Opera中可正常工作，但在最新版Firefox中完全失效，且无任何报错信息。

以下是我的代码：

const svg_object = document.createElement('object');
svg_object.setAttribute('type', 'image/svg+xml');
svg_object.setAttribute('width', '25px');
svg_object.setAttribute('height', '25px');
svg_object.setAttribute('data', 'https://www.svgrepo.com/show/38250/whatsapp.svg');
svg_object.setAttribute('class', 'obj');
document.body.appendChild(svg_object);

const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
filter.id = 'myFilter'
const filter_color = document.createElementNS('http://www.w3.org/2000/svg', 'feColorMatrix');
filter_color.setAttribute('type', 'matrix');
filter_color.setAttribute('values', '0 0 0 0 0.9686274509803922 0 0 0 0 0.8235294117647058 0 0 0 0 0.5490196078431373 0 0 0 1 0');
filter.appendChild(filter_color);
document.body.appendChild(filter);

svg_object.style.filter = 'url(#myFilter)';

原因分析 #

Firefox对通过<object>标签引入的SVG应用页面级滤镜存在跨文档上下文限制：<object>加载的SVG属于独立的子文档，页面主文档中定义的滤镜不在其可访问范围内。而Chrome、Opera等浏览器在这一安全规则的实现上更为宽松，允许跨文档引用页面滤镜，因此功能正常。

解决方案 #

方案1：将滤镜插入到SVG内部文档 #

通过监听<object>的load事件，获取SVG的内部文档上下文，将滤镜定义插入到SVG的<defs>中，再为SVG元素应用滤镜：

const svg_object = document.createElement('object');
svg_object.setAttribute('type', 'image/svg+xml');
svg_object.setAttribute('width', '25px');
svg_object.setAttribute('height', '25px');
svg_object.setAttribute('data', 'https://www.svgrepo.com/show/38250/whatsapp.svg');
svg_object.setAttribute('class', 'obj');
document.body.appendChild(svg_object);

svg_object.onload = function() {
  const svgDoc = svg_object.contentDocument;
  if (!svgDoc) return;
  
  // 获取或创建SVG的defs元素
  const defs = svgDoc.querySelector('defs') || svgDoc.createElementNS('http://www.w3.org/2000/svg', 'defs');
  
  // 创建滤镜
  const filter = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'filter');
  filter.id = 'myFilter';
  const filter_color = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'feColorMatrix');
  filter_color.setAttribute('type', 'matrix');
  filter_color.setAttribute('values', '0 0 0 0 0.9686274509803922 0 0 0 0 0.8235294117647058 0 0 0 0 0.5490196078431373 0 0 0 1 0');
  filter.appendChild(filter_color);
  
  // 将滤镜插入defs，再把defs插入SVG根元素
  defs.appendChild(filter);
  if (!svgDoc.querySelector('defs')) {
    svgDoc.documentElement.insertBefore(defs, svgDoc.documentElement.firstChild);
  }
  
  // 为SVG根元素应用滤镜
  svgDoc.documentElement.style.filter = 'url(#myFilter)';
};

方案2：改用<img>标签加载SVG #

如果SVG没有外部资源依赖，可以改用<img>标签加载，此时页面主文档的滤镜可以直接应用到<img>元素上：

const svg_img = document.createElement('img');
svg_img.setAttribute('src', 'https://www.svgrepo.com/show/38250/whatsapp.svg');
svg_img.setAttribute('width', '25px');
svg_img.setAttribute('height', '25px');
document.body.appendChild(svg_img);

const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
filter.id = 'myFilter';
const filter_color = document.createElementNS('http://www.w3.org/2000/svg', 'feColorMatrix');
filter_color.setAttribute('type', 'matrix');
filter_color.setAttribute('values', '0 0 0 0 0.9686274509803922 0 0 0 0 0.8235294117647058 0 0 0 0 0.5490196078431373 0 0 0 1 0');
filter.appendChild(filter_color);
document.body.appendChild(filter);

svg_img.style.filter = 'url(#myFilter)';

内容的提问来源于stack exchange，提问作者zhin dins