Firefox扩展SVG图标疑似黑色背景问题：实为描边缩放Bug

我对问题的判断有误。并非图标背景变为黑色，而是描边（stroke）缩放异常，导致看起来像是有黑色背景。我已将该Bug上报至Bugzilla。

原始问题 #

我开发了一款Firefox扩展，其浏览器操作按钮和上下文菜单项使用了相同的自定义图标。此前我一直使用PNG格式图标，现在想切换为SVG格式。但遇到的问题是，Firefox会为SVG图标填充黑色背景，而非保留透明效果。我通过多款应用打开该SVG图标，均显示其背景为透明。为何Firefox将其用作扩展上下文菜单项或浏览器操作图标时，无法识别其透明属性？

以下代码片段可证明该图标背景为透明：

body {
  background-color: red;
  animation-name: changeColors;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes changeColors {
  from {
    background-color: red;
  }
  to {
    background-color: green;
  }
}

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketchjs="https://sketch.io/dtd/" sketchjs:metadata="eyJuYW1lIjoiRHJhd2luZyIsInN1cmZhY2UiOnsiaXNQYWludCI6dHJ1ZSwibWV0aG9kIjoiZmlsbCIsImJsZW5kIjoibm9ybWFsIiwiZW5hYmxlZCI6dHJ1ZSwib3BhY2l0eSI6MSwidHlwZSI6InBhdHRlcm4iLCJwYXR0ZXJuIjp7InR5cGUiOiJwYXR0ZXJuIiwicmVmbGVjdCI6Im5vLXJlZmxlY3QiLCJyZXBlYXQiOiJyZXBlYXQiLCJzbW9vdGhpbmciOmZhbHNlLCJzcmMiOiJ0cmFuc3BhcmVudExpZ2h0Iiwic3giOjEsInN5IjoxLCJ4MCI6MC41LCJ4MSI6MSwieTAiOjAuNSwieTEiOjF9LCJpc0ZpbGwiOnRydWV9LCJjbGlwUGF0aCI6eyJlbmFibGVkIjp0cnVlLCJzdHlsZSI6eyJzdHJva2VTdHlsZSI6ImJsYWNrIiwibGluZVdpZHRoIjoxfX0sImRlc2NyaXB0aW9uIjoiTWFkZSB3aXRoIFNrZXRjaHBhZCIsIm1ldGFkYXRhIjp7fSwiZXhwb3J0RFBJIjo3MiwiZXhwb3J0Rm9ybWF0IjoicG5nIiwiZXhwb3J0UXVhbGl0eSI6MC45NSwidW5pdHMiOiJweCIsIndpZHRoIjoxMjgsImhlaWdodCI6MTI4LCJwYWdlcyI6W3sid2lkdGgiOjEyOCwiaGVpZ2h0IjoxMjh9XSwidXVpZCI6Ijg4OWIxNzZlLWJlOTEtNGNlYS1hZTRjLWY5MGVhNWI0YzFiYiJ9" width="128" height="128" viewBox="0 0 128 128">
  <path style="fill: #242529; stroke: #121212; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 0.7; stroke-width: 15; vector-effect: non-scaling-stroke;" sketchjs:tool="circle" d="M50 0 C77.614 0 100 22.386 100 50 100 77.614 77.614 100 50 100 22.386 100 0 77.614 0 50 0 22.386 22.386 0 50 0 z" transform="matrix(1.0804830483049923,0,0,1.080483049923,10.000000000200153,10.332170735958027)"/>
  <path style="fill: #242529; stroke: #121212; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 0.6666666666666667; stroke-width: 20; vector-effect: non-scaling-stroke;" sketchjs:tool="circle" d="M50 0 C77.614 0 100 22.386 100 50 100 77.614 77.614 100 50 100 22.386 100 0 77.614 0 50 0 22.386 22.386 0 50 0 z" transform="matrix(1.0804830483049923,0,0,1.0804830483049923,10.000000000200153,10.000000000199847)"/>
  <path style="fill: #999999; mix-blend-mode: source-over; fill-opacity: 1;" sketchjs:tool="path" d="M0 75.09 C75.48 68.13 71.72 0 71.72 0 71.72 0 105.68 98.51 1.17 75.85 " transform="matrix(0.8743546320957299,0,0,0.8743546320957296,40.281708922438206,37.527195340009996)"/>
  <path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M12.249 0 L15.848 7.294 23.898 8.464 18.073 14.141 19.448 22.158 12.249 18.373 5.049 22.158 6.424 14.141 0.599 8.464 8.649 7.294 z" transform="matrix(0.697355799061732,-0.13642022494671896,0.13642022494671896,0.697355799061732,41.265182438537245,79.6845481140266)"/>
  <path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M9.084 0 L11.754 5.41 17.724 6.277 13.404 10.488 14.424 16.434 9.084 13.626 3.745 16.434 4.764 10.488 0.445 6.277 6.414 5.41 z" transform="matrix(0.9902159962126372,0.13954311464423616,-0.13954311464423616,0.9902159962126372,20.83972994628792,35.244013452720175)"/>
  <path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M12.182 0 L15.762 7.254 23.768 8.418 17.975 14.064 19.343 22.038 12.182 18.273 5.022 22.038 6.389 14.064 0.596 8.418 8.602 7.254 z" transform="matrix(0.9975510002532796,0.06994284733753305,-0.06994284733753305,0.9975510002532796,77.22221836207314,21.377447387233143)"/>
</svg>

以下是图标未显示透明效果的截图：

我还在后台页面中使用browser.browserAction.setIcon()方法切换图标，但这应该不会影响透明效果。

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