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圈和＃3。

当我应用我的路径＆＃39;时，图像再次拉长。

他们提到了一个Firefox错误，但它被标记为＆＃39; fixed＆＃39;。

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

Answer 1

这是通过bug 1047973从Firefox 40开始修复的。我认为这个版本目前以Firefox developer edition提供，但将于2015年8月11日在生产版本中出现

在<path>上使用时，SVG <pattern> <img/>在Firefox中不会缩放

1 个答案: