title: Raphael, filling background with image (fillfit)
body: <p>I've been struggling with the following problem.</p>
  
  <p>I have an element, which I'd like to fill with one image. Raphael is using pattern by its default settings, thus repeating the image.</p>
  
  <p>I found <a href="http://xn--dahlstrm-t4a.net/svg/raphaeljs/fill-shape-with-image.html" rel="nofollow noreferrer">http://xn--dahlstrm-t4a.net/svg/raphaeljs/fill-shape-with-image.html</a>, which should do the task, but the same problem persists.</p>
  
  <p>Any idea how to tweak the code such a way that you could set one image from upper left-corner to bottom right-corner?</p>
  
  <p><img src="https://i.imgur.com/lw6QQn1.png" alt="repeating background"></p>
  
  <pre><code>    case "fillfit":
          var isURL = Str(value).match(R._ISURL);
          if (isURL) {
              el = $("pattern");
              var ig = $("image");
              console.log('R', R);
              el.id = R.createUUID();
              $(el, {x: 0, y: 0, height: 1, width: 1, "patternContentUnits": "objectBoundingBox"});
              $(ig, {x: 0, y: 0, width: 1, height: 1, "preserveAspectRatio": "none", "xlink:href": isURL[1]});
  
              el.appendChild(ig);
              o.paper.defs.appendChild(el);
              $(node, {fill: "url(#" + el.id + ")"});
              o.pattern = el;
              o.pattern &amp;&amp; updatePosition(o);
          }
          break;
  </code></pre>
  
  <p>Yours
  Heikki</p>