title: SVG Pattern, any way/hack to stop repeating image
body: <p>I'm using an SVG <code>&lt;pattern&gt;</code> to make an <code>&lt;image&gt;</code> a fill on another user supplied SVG but I really hate how it automatically repeats (I get it) I need to know if there's a way or a hack to make it stop repeating the image as it's causing two issues.</p>
  
  <ol>
  <li><p>When the browser thinks it has to start painting multiple of the image (tiling) it visibly janks (I think this is also in part to the poor performance of Interact.js)</p></li>
  <li><p>Users don't want it to tile, just the empty space around it.</p></li>
  </ol>
  
  <p>It's in an Electron app so browser support is minimal.</p>
  
  <pre><code>process.versions = {
    ares: "1.10.1-DEV"
    atom-shell: "0.34.1"
    chrome: "45.0.2454.85"
    electron: "0.34.1"
    http_parser: "2.5.0"
    modules: "46"
    node: "4.1.1"
    openssl: "1.0.2d"
    uv: "1.7.4"
    v8: "4.5.103.29"
    zlib: "1.2.8"
  }
  </code></pre>
  
  <p>Here is the pattern as requested (with the transforms that are commonly applied), although but I'm not sure what use this is.</p>
  
  <p>The <code>&lt;pattern&gt;</code>'s <code>width</code> and <code>height</code> are calculated by <code>(target element's dimensions / image's size) + 1</code>. <code>data-x/y</code> are used as part of a drag and drop interface, <code>data-scale-x/y</code> are used to scale the image without translating it.</p>
  
  <pre><code>&lt;pattern id="user_image_container" patternUnits="objectBoundingBox" x="0" y="0" width="16.125264252110085" height="11.416432536797034" data-x="-3008" data-y="-1525" patternTransform="rotate(0 -416 203) translate(170.510014198065 170.5174437535593) scale(0.070795135733522) translate(-3008 -1525)" data-scale-x="170.510014198065" data-scale-y="170.5174437535593"&gt;
    &lt;image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/Users/username/Desktop/IMG_8829 2.JPG" id="user_image" width="5184" height="3456"&gt;&lt;/image&gt;
  &lt;/pattern&gt;
  </code></pre>
  
  <p>The pattern is used as a <code>fill</code> attribute on a path in another, separate SVG.</p>
  
  <p>Here is a Codepen that shows the image tiling in the same way I'm using it (less transforms)</p>
  
  <p><a href="http://codepen.io/davemackintosh/pen/zvLvey" rel="noreferrer">http://codepen.io/davemackintosh/pen/zvLvey</a></p>