SVG中Data URI方式feImage非均匀缩放的Firefox兼容问题

问题背景 #

• Firefox不支持feImage直接引用SVG内部元素，必须改用Data URI作为输入源
• 使用Data URI后，Firefox中对feImage应用非均匀缩放（含剪切变换）时，会强制转为均匀缩放；Chrome、Chromium、Opera等浏览器可正常处理非均匀缩放

可行解决方案 #

方案1：使用feTransform实现非均匀缩放

绕过Firefox对feImage宽高属性的比例限制，先按原始尺寸引入资源，再通过feTransform滤镜的矩阵变换实现非均匀拉伸。

示例代码：

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 原始SVG元素 -->
    <circle id="circle" cx="50" cy="50" r="50" fill="red"/>
    <filter id="scaledFilter">
      <!-- 按原始尺寸引入Data URI资源 -->
      <feImage 
        href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='red'/%3E%3C/svg%3E" 
        x="0" y="0" width="100" height="100"
      />
      <!-- 矩阵变换：x轴缩放2倍，y轴缩放1倍 -->
      <feTransform matrix="2 0 0 1 0 0"/>
    </filter>
  </defs>
  <!-- 应用滤镜的容器 -->
  <rect width="400" height="300" filter="url(#scaledFilter)"/>
</svg>

方案2：在Data URI源SVG内预先拉伸

直接在Data URI封装的SVG中，通过viewBox和preserveAspectRatio="none"实现非均匀拉伸，再让feImage按拉伸后的尺寸引入。

示例代码：

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="preScaledFilter">
      <!-- 源SVG内通过viewBox和preserveAspectRatio实现非均匀拉伸 -->
      <feImage 
        href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' width='200' height='100'%3E%3Ccircle cx='50' cy='50' r='50' fill='red'/%3E%3C/svg%3E" 
        x="0" y="0" width="200" height="100"
      />
    </filter>
  </defs>
  <rect width="400" height="300" filter="url(#preScaledFilter)"/>
</svg>

原理说明 #

Firefox对feImage的width/height属性做了特殊处理，会强制保持资源原始宽高比，导致直接设置非均匀尺寸失效。上述两种方案通过分离资源引入与缩放逻辑，或者在源资源内完成拉伸，均可绕开该限制，实现跨浏览器的非均匀缩放效果。

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