CODEWITHSUNDEEP
firefoxsvgpathstretch
joseph
joseph

Reputation: 25

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

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?

Upvotes: 2

Views: 466

Answers (1)

Robert Longson
Robert Longson

Reputation: 124219

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

Upvotes: 3

Related Questions