2

Example 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>

Open in Firefox to see image stretched (undesired effect)

Open in Chrome to see image sliced (desired effect)

I read Crop to fit an svg pattern, which was close to solving the problem.

It appeared to work only on 'circle's #2 and #3.

When I applied my 'path', image got stretched again.

They mention a Firefox bug, but it is marked as 'fixed'.

How can I get my image sliced across browsers?

Community
  • 1
  • 1
joseph
  • 25
  • 5

1 Answers1

3

This is fixed from Firefox 40 onwards by bug 1047973. I think that's currently available as Firefox developer edition but will be out in the production version on 11th August 2015

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Thanks Robert. Is there any kind of workaround before August? – joseph May 19 '15 at 11:01
  • I mean, in terms of web development. Is there a patch (js perhaps?) that would simulate the fix to the end user? – joseph May 19 '15 at 11:16
  • Not that I'm aware, you could try adjusting the patternTransform to scale the pattern dynamically as the page resizes I guess. Of course you'd have to ensure you only did that in Firefox versions prior to 40. – Robert Longson May 19 '15 at 11:21
  • or maybe applying a clipPath to an image that's directly rendered (no pattern required then) – Robert Longson May 19 '15 at 13:41
  • I like the idea of clipPath, which I initially eliminated as it doesn't have great browser support. This could work as a temporary patch. Thanks. – joseph May 20 '15 at 08:58
  • Really? AFAIK every UA supports clipPath so I don't know where you're getting your information from. – Robert Longson May 20 '15 at 09:08
  • That's about clipping non-SVG objects and also covers non-URL syntax. You're using the older url syntax and applying it to SVG objects, that works fine most places, even IE. – Robert Longson May 21 '15 at 11:19