SVG <pattern> <image> 在 <path> 上使用时无法在 Firefox 中缩放

Question

例子here

<svg width="978px" height="668px" viewBox="0 0 978 668" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="top" width="1" height="1" viewBox="0 0 717 478" preserveAspectRatio="xMidYMid slice">
      <image xlink:href="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="717px" height="478px"></image>
    </pattern>
  </defs>

  <g>        
    <path d="M1,95.0771484 L1,0 L979,0 L424.030762,379.068604 L1,95.0771484 Z" fill="url(#top)"></path>
  </g>
</svg>

在 Firefox 中打开以查看图像拉伸（不良效果）

在 Chrome 中打开以查看切片图像（所需效果）

我看了Crop to fit an svg pattern，接近解决问题了

它似乎只对“圆圈”的 #2 和 #3 有效。

当我应用 'path' 时，图像再次被拉伸。

他们提到了一个 Firefox 错误，但它被标记为 'fixed'。

如何让我的图像在浏览器中切片？

Answer 1

此问题已由 bug 1047973. I think that's currently available as Firefox developer edition 从 Firefox 40 开始修复，但将于 2015 年 8 月 11 日在生产版本中推出

SVG <pattern> <image> 在 <path> 上使用时无法在 Firefox 中缩放

SVG <pattern> <image> does not scale in Firefox when used on <path>

firefox

svg

path

stretch