各种 stackoverflow 答案和评论展示了在 svg 过滤器中使用以下构造的示例：
<feImage href="#id_of_some_element_in_current_svg">
（或使用旧语法xlink:href=代替href=），总是存在这样的警告“这在 Firefox 中不起作用，因为这个；如果您想要在 Firefox 中起作用的东西，请使用内联数据 URI 作为 feImage 的输入，而不是对象引用”。
例如：
好的，我正在尝试。只要我不尝试对结果进行几何变换，它似乎就有效。
在我的应用程序中，我还需要将任意变换矩阵（通常带有非均匀缩放和剪切）应用于 svg 滤镜的结果。但我根本无法在 Firefox 中实现此功能 - 在 Firefox 中，它似乎总是应用一些我没有要求的均匀缩放。
例子
这是一个展示该问题的简单例子。
feImage（成功由内联数据 URI 生成）是一个 100x100 的灰色正方形，里面有蓝色、红色、绿色的小正方形：
我试图用各种均匀和非均匀比例绘制它的 9 个副本。
我在scale(...)这里使用 来表达每一种变换，但我也尝试使用 来表达同样的事情matrix(...)，但那也不起作用。
<!DOCTYPE html><html><head><meta charset="utf-8" ></head><body>
<svg width="480" height="480">
<defs>
<filter id="the_filter">
<feImage href='data:image/svg+xml,
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<!-- a gray square with little blue,red,green squares inside -->
<rect x="0" y="0" width="100" height="100" fill="gray" />
<rect x="10" y="10" width="10" height="10" fill="blue" />
<rect x="80" y="10" width="10" height="10" fill="red" />
<rect x="10" y="80" width="10" height="10" fill="green" />
</svg>'
/>
</filter>
</defs>
<!-- a blue frame around the entire svg -->
<rect x="0" y="0" width="100%" height="100%" stroke-width="10" stroke="blue" fill="none" />
<!-- 9 rects with the filter applied, with various uniform and nonuniform scales -->
<rect x="0" y="0" width="100" height="100" transform="translate(20 20) scale(.5 .5)" filter="url(#the_filter)" />
<rect x="0" y="0" width="100" height="100" transform="translate(100 20) scale(1 .5)" filter="url(#the_filter)" />
<rect x="0" y="0" width="100" height="100" transform="translate(245 20) scale(2 .5)" filter="url(#the_filter)" />
<rect x="0" y="0" width="100" height="100" transform="translate(20 100) scale(.5 1)" filter="url(#the_filter)" />
<rect x="0" y="0" width="100" height="100" transform="translate(100 100) scale(1 1)" filter="url(#the_filter)" />
<rect x="0" y="0" width="100" height="100" transform="translate(245 100) scale(2 1)" filter="url(#the_filter)" />
<rect x="0" y="0" width="100" height="100" transform="translate(20 245) scale(.5 2)" filter="url(#the_filter)" />
<rect x="0" y="0" width="100" height="100" transform="translate(100 245) scale(1 2)" filter="url(#the_filter)" />
<rect x="0" y="0" width="100" height="100" transform="translate(245 245) scale(2 2)" filter="url(#the_filter)" />
</svg>
</body></html>结果是 chrome 131.0.6778.139、chromium 131.0.6778.85、opera 115.0.5322.109（正确）：
Firefox 133.0.3 中的结果（错误）：
我如何以在 Firefox 和其他浏览器中有效的方式非均匀缩放这些 feImage？
您要找的答案是
preserveAspectRatio。这是我对您的代码片段中代码所做的唯一更改。下面的代码片段分配了值none。默认值应该是xMidYMid meet，它保留了纵横比和中点。这是 Firefox 应用的默认值。显然 Chrome 不是。